From ab6fdbbb6806e870362f44728f88f0c82831ff10 Mon Sep 17 00:00:00 2001
From: Zach Gollwitzer <zach@maybe.co>
Date: Fri, 18 Jul 2025 08:30:00 -0400
Subject: [PATCH] Component namespacing (#2463)

* [claudesquad] update from 'component-namespacing' on 18 Jul 25 07:23 EDT

* [claudesquad] update from 'component-namespacing' on 18 Jul 25 07:30 EDT

* Update stimulus controller references to use namespace

* Fix remaining tests
---
 .../alert.html.erb}                           |  0
 .../{alert_component.rb => DS/alert.rb}       |  2 +-
 .../button.html.erb}                          |  0
 .../{button_component.rb => DS/button.rb}     |  2 +-
 .../buttonish.rb}                             |  4 +--
 .../dialog.html.erb}                          |  2 +-
 .../{dialog_component.rb => DS/dialog.rb}     | 20 ++++++-------
 app/components/{ => DS}/dialog_controller.js  |  0
 .../disclosure.html.erb}                      |  0
 .../disclosure.rb}                            |  2 +-
 .../filled_icon.html.erb}                     |  0
 .../filled_icon.rb}                           |  2 +-
 .../link.html.erb}                            |  0
 .../{link_component.rb => DS/link.rb}         |  2 +-
 .../menu.html.erb}                            |  8 +++---
 .../{menu_component.rb => DS/menu.rb}         |  8 +++---
 app/components/{ => DS}/menu_controller.js    |  0
 .../menu_item.html.erb}                       |  0
 .../menu_item.rb}                             |  2 +-
 .../{tab_component.rb => DS/tab.rb}           |  2 +-
 app/components/DS/tabs.html.erb               | 18 ++++++++++++
 .../{tabs_component.rb => DS/tabs.rb}         |  6 ++--
 .../{tabs/nav_component.rb => DS/tabs/nav.rb} |  4 +--
 .../panel_component.rb => DS/tabs/panel.rb}   |  2 +-
 app/components/{ => DS}/tabs_controller.js    |  0
 .../toggle.html.erb}                          |  0
 .../{toggle_component.rb => DS/toggle.rb}     |  2 +-
 app/components/UI/account_page.html.erb       |  2 +-
 app/components/design_system_component.rb     |  2 ++
 app/components/tabs_component.html.erb        | 18 ------------
 app/helpers/application_helper.rb             |  2 +-
 app/helpers/styled_form_builder.rb            |  4 +--
 app/views/accounts/_account.html.erb          |  4 +--
 .../accounts/_account_sidebar_tabs.html.erb   |  8 +++---
 app/views/accounts/_account_type.html.erb     |  2 +-
 .../accounts/_accountable_group.html.erb      |  4 +--
 app/views/accounts/_empty.html.erb            |  2 +-
 app/views/accounts/_form.html.erb             |  2 +-
 app/views/accounts/_logo.html.erb             |  2 +-
 app/views/accounts/index.html.erb             |  2 +-
 app/views/accounts/new.html.erb               |  2 +-
 app/views/accounts/new/_container.html.erb    |  4 +--
 app/views/accounts/show/_activity.html.erb    |  2 +-
 app/views/accounts/show/_header.html.erb      |  2 +-
 app/views/accounts/show/_menu.html.erb        |  2 +-
 .../_budget_category.html.erb                 |  2 +-
 .../_confirm_button.html.erb                  |  2 +-
 .../budget_categories/_no_categories.html.erb |  4 +--
 app/views/budget_categories/show.html.erb     |  4 +--
 app/views/budgets/_budget_donut.html.erb      |  6 ++--
 app/views/budgets/_budget_header.html.erb     |  8 +++---
 .../budgets/_over_allocation_warning.html.erb |  2 +-
 app/views/budgets/_picker.html.erb            |  2 +-
 app/views/budgets/edit.html.erb               |  2 +-
 app/views/budgets/show.html.erb               |  4 +--
 app/views/categories/_category.html.erb       |  2 +-
 app/views/categories/_menu.html.erb           |  2 +-
 app/views/categories/edit.html.erb            |  2 +-
 app/views/categories/index.html.erb           |  8 +++---
 app/views/categories/new.html.erb             |  2 +-
 app/views/category/deletions/new.html.erb     |  6 ++--
 app/views/category/dropdowns/_row.html.erb    |  2 +-
 app/views/category/dropdowns/show.html.erb    |  2 +-
 app/views/chats/_chat.html.erb                |  2 +-
 app/views/chats/_chat_nav.html.erb            |  4 +--
 app/views/chats/_error.html.erb               |  2 +-
 app/views/chats/index.html.erb                |  2 +-
 app/views/credit_cards/_overview.html.erb     |  2 +-
 app/views/credit_cards/edit.html.erb          |  2 +-
 app/views/credit_cards/new.html.erb           |  2 +-
 app/views/cryptos/edit.html.erb               |  2 +-
 app/views/cryptos/new.html.erb                |  2 +-
 app/views/depositories/edit.html.erb          |  2 +-
 app/views/depositories/new.html.erb           |  2 +-
 .../doorkeeper/authorizations/error.html.erb  |  2 +-
 .../doorkeeper/authorizations/new.html.erb    |  4 +--
 .../_family_merchant.html.erb                 |  2 +-
 app/views/family_merchants/edit.html.erb      |  2 +-
 app/views/family_merchants/index.html.erb     |  4 +--
 app/views/family_merchants/new.html.erb       |  2 +-
 app/views/holdings/_cash.html.erb             |  2 +-
 app/views/holdings/show.html.erb              |  2 +-
 app/views/import/cleans/show.html.erb         |  2 +-
 app/views/import/configurations/show.html.erb |  4 +--
 app/views/import/confirms/_mappings.html.erb  |  6 ++--
 app/views/import/uploads/show.html.erb        |  2 +-
 app/views/imports/_empty.html.erb             |  2 +-
 app/views/imports/_failure.html.erb           |  2 +-
 app/views/imports/_import.html.erb            |  2 +-
 app/views/imports/_importing.html.erb         |  4 +--
 app/views/imports/_ready.html.erb             |  2 +-
 app/views/imports/_revert_failure.html.erb    |  2 +-
 app/views/imports/_success.html.erb           |  2 +-
 app/views/imports/index.html.erb              |  2 +-
 app/views/imports/new.html.erb                |  2 +-
 app/views/investments/edit.html.erb           |  2 +-
 app/views/investments/new.html.erb            |  2 +-
 app/views/invitations/new.html.erb            |  2 +-
 app/views/layouts/application.html.erb        |  4 +--
 app/views/layouts/imports.html.erb            |  4 +--
 .../layouts/shared/_confirm_dialog.html.erb   |  4 +--
 app/views/layouts/wizard.html.erb             |  4 +--
 app/views/loans/edit.html.erb                 |  2 +-
 app/views/loans/new.html.erb                  |  2 +-
 app/views/loans/tabs/_overview.html.erb       |  2 +-
 app/views/mfa/backup_codes.html.erb           |  2 +-
 app/views/onboardings/_logout.html.erb        |  2 +-
 app/views/onboardings/goals.html.erb          |  2 +-
 app/views/onboardings/trial.html.erb          | 28 +++++++++----------
 app/views/other_assets/edit.html.erb          |  2 +-
 app/views/other_assets/new.html.erb           |  2 +-
 app/views/other_liabilities/edit.html.erb     |  2 +-
 app/views/other_liabilities/new.html.erb      |  2 +-
 app/views/pages/dashboard.html.erb            |  4 +--
 .../pages/dashboard/_balance_sheet.html.erb   |  2 +-
 .../pages/dashboard/_cashflow_sankey.html.erb |  4 +--
 .../_no_accounts_graph_placeholder.html.erb   |  4 +--
 .../pages/redis_configuration_error.html.erb  |  4 +--
 app/views/plaid_items/_plaid_item.html.erb    |  4 +--
 app/views/properties/_form_alert.html.erb     |  4 +--
 app/views/properties/address.html.erb         |  4 +--
 app/views/properties/balances.html.erb        |  4 +--
 app/views/properties/edit.html.erb            |  4 +--
 app/views/properties/new.html.erb             |  4 +--
 app/views/properties/tabs/_overview.html.erb  |  2 +-
 .../rule/conditions/_condition_group.html.erb |  2 +-
 app/views/rules/_category_rule_cta.html.erb   |  4 +--
 app/views/rules/_form.html.erb                |  6 ++--
 app/views/rules/_rule.html.erb                |  2 +-
 app/views/rules/confirm.html.erb              |  4 +--
 app/views/rules/edit.html.erb                 |  2 +-
 app/views/rules/index.html.erb                |  8 +++---
 app/views/rules/new.html.erb                  |  2 +-
 app/views/settings/_settings_nav.html.erb     |  4 +--
 app/views/settings/api_keys/created.html.erb  |  6 ++--
 .../api_keys/created.turbo_stream.erb         |  6 ++--
 app/views/settings/api_keys/new.html.erb      |  4 +--
 app/views/settings/api_keys/show.html.erb     | 18 ++++++------
 app/views/settings/billings/show.html.erb     |  6 ++--
 app/views/settings/profiles/show.html.erb     | 10 +++----
 app/views/settings/securities/show.html.erb   |  4 +--
 app/views/subscriptions/upgrade.html.erb      |  6 ++--
 app/views/tag/deletions/new.html.erb          |  6 ++--
 app/views/tags/_tag.html.erb                  |  2 +-
 app/views/tags/edit.html.erb                  |  2 +-
 app/views/tags/index.html.erb                 |  6 ++--
 app/views/tags/new.html.erb                   |  2 +-
 app/views/trades/_header.html.erb             |  2 +-
 app/views/trades/_trade.html.erb              |  2 +-
 app/views/trades/new.html.erb                 |  2 +-
 app/views/trades/show.html.erb                |  2 +-
 app/views/transactions/_form.html.erb         |  2 +-
 app/views/transactions/_transaction.html.erb  |  2 +-
 .../transactions/bulk_updates/new.html.erb    | 10 +++----
 app/views/transactions/index.html.erb         |  8 +++---
 app/views/transactions/new.html.erb           |  2 +-
 .../transactions/searches/_form.html.erb      |  5 ++--
 .../transactions/searches/_menu.html.erb      |  8 +++---
 .../filters/_merchant_filter.html.erb         |  2 +-
 .../searches/filters/_tag_filter.html.erb     |  2 +-
 app/views/transactions/show.html.erb          |  6 ++--
 app/views/transfer_matches/new.html.erb       |  2 +-
 app/views/transfers/new.html.erb              |  2 +-
 app/views/transfers/show.html.erb             |  2 +-
 app/views/users/_user_menu.html.erb           |  2 +-
 app/views/valuations/_valuation.html.erb      |  2 +-
 app/views/valuations/confirm_create.html.erb  |  2 +-
 app/views/valuations/confirm_update.html.erb  |  2 +-
 app/views/valuations/new.html.erb             |  4 +--
 app/views/valuations/show.html.erb            |  6 ++--
 app/views/vehicles/edit.html.erb              |  2 +-
 app/views/vehicles/new.html.erb               |  2 +-
 app/views/vehicles/tabs/_overview.html.erb    |  2 +-
 .../previews/alert_component_preview.rb       |  2 +-
 .../previews/button_component_preview.rb      |  6 ++--
 .../previews/dialog_component_preview.rb      |  4 +--
 .../previews/disclosure_component_preview.rb  |  2 +-
 .../previews/filled_icon_component_preview.rb |  4 +--
 .../previews/link_component_preview.rb        | 10 +++----
 .../previews/menu_component_preview.rb        |  6 ++--
 .../previews/toggle_component_preview.rb      |  2 +-
 test/system/accounts_test.rb                  |  2 +-
 182 files changed, 322 insertions(+), 321 deletions(-)
 rename app/components/{alert_component.html.erb => DS/alert.html.erb} (100%)
 rename app/components/{alert_component.rb => DS/alert.rb} (97%)
 rename app/components/{button_component.html.erb => DS/button.html.erb} (100%)
 rename app/components/{button_component.rb => DS/button.rb} (95%)
 rename app/components/{buttonish_component.rb => DS/buttonish.rb} (96%)
 rename app/components/{dialog_component.html.erb => DS/dialog.html.erb} (92%)
 rename app/components/{dialog_component.rb => DS/dialog.rb} (77%)
 rename app/components/{ => DS}/dialog_controller.js (100%)
 rename app/components/{disclosure_component.html.erb => DS/disclosure.html.erb} (100%)
 rename app/components/{disclosure_component.rb => DS/disclosure.rb} (82%)
 rename app/components/{filled_icon_component.html.erb => DS/filled_icon.html.erb} (100%)
 rename app/components/{filled_icon_component.rb => DS/filled_icon.rb} (97%)
 rename app/components/{link_component.html.erb => DS/link.html.erb} (100%)
 rename app/components/{link_component.rb => DS/link.rb} (94%)
 rename app/components/{menu_component.html.erb => DS/menu.html.erb} (59%)
 rename app/components/{menu_component.rb => DS/menu.rb} (81%)
 rename app/components/{ => DS}/menu_controller.js (100%)
 rename app/components/{menu_item_component.html.erb => DS/menu_item.html.erb} (100%)
 rename app/components/{menu_item_component.rb => DS/menu_item.rb} (97%)
 rename app/components/{tab_component.rb => DS/tab.rb} (75%)
 create mode 100644 app/components/DS/tabs.html.erb
 rename app/components/{tabs_component.rb => DS/tabs.rb} (94%)
 rename app/components/{tabs/nav_component.rb => DS/tabs/nav.rb} (87%)
 rename app/components/{tabs/panel_component.rb => DS/tabs/panel.rb} (69%)
 rename app/components/{ => DS}/tabs_controller.js (100%)
 rename app/components/{toggle_component.html.erb => DS/toggle.html.erb} (100%)
 rename app/components/{toggle_component.rb => DS/toggle.rb} (95%)
 create mode 100644 app/components/design_system_component.rb
 delete mode 100644 app/components/tabs_component.html.erb

diff --git a/app/components/alert_component.html.erb b/app/components/DS/alert.html.erb
similarity index 100%
rename from app/components/alert_component.html.erb
rename to app/components/DS/alert.html.erb
diff --git a/app/components/alert_component.rb b/app/components/DS/alert.rb
similarity index 97%
rename from app/components/alert_component.rb
rename to app/components/DS/alert.rb
index 47c348f8..22241133 100644
--- a/app/components/alert_component.rb
+++ b/app/components/DS/alert.rb
@@ -1,4 +1,4 @@
-class AlertComponent < ViewComponent::Base
+class DS::Alert < DesignSystemComponent
   def initialize(message:, variant: :info)
     @message = message
     @variant = variant
diff --git a/app/components/button_component.html.erb b/app/components/DS/button.html.erb
similarity index 100%
rename from app/components/button_component.html.erb
rename to app/components/DS/button.html.erb
diff --git a/app/components/button_component.rb b/app/components/DS/button.rb
similarity index 95%
rename from app/components/button_component.rb
rename to app/components/DS/button.rb
index 36600a3c..a253c04c 100644
--- a/app/components/button_component.rb
+++ b/app/components/DS/button.rb
@@ -2,7 +2,7 @@
 
 # An extension to `button_to` helper.  All options are passed through to the `button_to` helper with some additional
 # options available.
-class ButtonComponent < ButtonishComponent
+class DS::Button < DS::Buttonish
   attr_reader :confirm
 
   def initialize(confirm: nil, **opts)
diff --git a/app/components/buttonish_component.rb b/app/components/DS/buttonish.rb
similarity index 96%
rename from app/components/buttonish_component.rb
rename to app/components/DS/buttonish.rb
index 4bbb2882..b83557b1 100644
--- a/app/components/buttonish_component.rb
+++ b/app/components/DS/buttonish.rb
@@ -1,4 +1,4 @@
-class ButtonishComponent < ViewComponent::Base
+class DS::Buttonish < DesignSystemComponent
   VARIANTS = {
     primary: {
       container_classes: "text-inverse bg-inverse hover:bg-inverse-hover disabled:bg-gray-500 theme-dark:disabled:bg-gray-400",
@@ -71,7 +71,7 @@ class ButtonishComponent < ViewComponent::Base
   end
 
   def call
-    raise NotImplementedError, "ButtonishComponent is an abstract class and cannot be instantiated directly."
+    raise NotImplementedError, "Buttonish is an abstract class and cannot be instantiated directly."
   end
 
   def container_classes(override_classes = nil)
diff --git a/app/components/dialog_component.html.erb b/app/components/DS/dialog.html.erb
similarity index 92%
rename from app/components/dialog_component.html.erb
rename to app/components/DS/dialog.html.erb
index ac4cd07f..ca8f86b7 100644
--- a/app/components/dialog_component.html.erb
+++ b/app/components/DS/dialog.html.erb
@@ -1,7 +1,7 @@
 <%= wrapper_element do %>
   <%= tag.dialog class: "w-full h-full bg-transparent theme-dark:backdrop:bg-alpha-black-900 backdrop:bg-overlay #{drawer? ? "lg:p-3" : "lg:p-1"}", **merged_opts do %>
     <%= tag.div class: dialog_outer_classes do %>
-      <%= tag.div class: dialog_inner_classes, data: { dialog_target: "content" } do %>
+      <%= tag.div class: dialog_inner_classes, data: { DS__dialog_target: "content" } do %>
         <div class="grow overflow-y-auto py-4 space-y-4 flex flex-col">
           <% if header? %>
             <%= header %>
diff --git a/app/components/dialog_component.rb b/app/components/DS/dialog.rb
similarity index 77%
rename from app/components/dialog_component.rb
rename to app/components/DS/dialog.rb
index 94246872..3385003c 100644
--- a/app/components/dialog_component.rb
+++ b/app/components/DS/dialog.rb
@@ -1,9 +1,9 @@
-class DialogComponent < ViewComponent::Base
+class DS::Dialog < DesignSystemComponent
   renders_one :header, ->(title: nil, subtitle: nil, hide_close_icon: false, **opts, &block) do
     content_tag(:header, class: "px-4 flex flex-col gap-2", **opts) do
       title_div = content_tag(:div, class: "flex items-center justify-between gap-2") do
         title = content_tag(:h2, title, class: class_names("font-medium text-primary", drawer? ? "text-lg" : "")) if title
-        close_icon = render ButtonComponent.new(variant: "icon", class: "ml-auto", icon: "x", tabindex: "-1", data: { action: "dialog#close" }) unless hide_close_icon
+        close_icon = render DS::Button.new(variant: "icon", class: "ml-auto", icon: "x", tabindex: "-1", data: { action: "DS--dialog#close" }) unless hide_close_icon
         safe_join([ title, close_icon ].compact)
       end
 
@@ -19,16 +19,16 @@ class DialogComponent < ViewComponent::Base
 
   renders_many :actions, ->(cancel_action: false, **button_opts) do
     merged_opts = if cancel_action
-      button_opts.merge(type: "button", data: { action: "modal#close" })
+      button_opts.merge(type: "button", data: { action: "DS--dialog#close" })
     else
       button_opts
     end
 
-    render ButtonComponent.new(**merged_opts)
+    render DS::Button.new(**merged_opts)
   end
 
   renders_many :sections, ->(title:, **disclosure_opts, &block) do
-    render DisclosureComponent.new(title: title, align: :right, **disclosure_opts) do
+    render DS::Disclosure.new(title: title, align: :right, **disclosure_opts) do
       block.call
     end
   end
@@ -99,11 +99,11 @@ class DialogComponent < ViewComponent::Base
     merged_opts = opts.dup
     data = merged_opts.delete(:data) || {}
 
-    data[:controller] = [ "dialog", "hotkey", data[:controller] ].compact.join(" ")
-    data[:dialog_auto_open_value] = auto_open
-    data[:dialog_reload_on_close_value] = reload_on_close
-    data[:action] = [ "mousedown->dialog#clickOutside", data[:action] ].compact.join(" ")
-    data[:hotkey] = "esc:dialog#close"
+    data[:controller] = [ "DS--dialog", "hotkey", data[:controller] ].compact.join(" ")
+    data[:DS__dialog_auto_open_value] = auto_open
+    data[:DS__dialog_reload_on_close_value] = reload_on_close
+    data[:action] = [ "mousedown->DS--dialog#clickOutside", data[:action] ].compact.join(" ")
+    data[:hotkey] = "esc:DS--dialog#close"
     merged_opts[:data] = data
 
     merged_opts
diff --git a/app/components/dialog_controller.js b/app/components/DS/dialog_controller.js
similarity index 100%
rename from app/components/dialog_controller.js
rename to app/components/DS/dialog_controller.js
diff --git a/app/components/disclosure_component.html.erb b/app/components/DS/disclosure.html.erb
similarity index 100%
rename from app/components/disclosure_component.html.erb
rename to app/components/DS/disclosure.html.erb
diff --git a/app/components/disclosure_component.rb b/app/components/DS/disclosure.rb
similarity index 82%
rename from app/components/disclosure_component.rb
rename to app/components/DS/disclosure.rb
index 5aba01b2..d301d671 100644
--- a/app/components/disclosure_component.rb
+++ b/app/components/DS/disclosure.rb
@@ -1,4 +1,4 @@
-class DisclosureComponent < ViewComponent::Base
+class DS::Disclosure < DesignSystemComponent
   renders_one :summary_content
 
   attr_reader :title, :align, :open, :opts
diff --git a/app/components/filled_icon_component.html.erb b/app/components/DS/filled_icon.html.erb
similarity index 100%
rename from app/components/filled_icon_component.html.erb
rename to app/components/DS/filled_icon.html.erb
diff --git a/app/components/filled_icon_component.rb b/app/components/DS/filled_icon.rb
similarity index 97%
rename from app/components/filled_icon_component.rb
rename to app/components/DS/filled_icon.rb
index 1f903243..73113a0b 100644
--- a/app/components/filled_icon_component.rb
+++ b/app/components/DS/filled_icon.rb
@@ -1,4 +1,4 @@
-class FilledIconComponent < ViewComponent::Base
+class DS::FilledIcon < DesignSystemComponent
   attr_reader :icon, :text, :hex_color, :size, :rounded, :variant
 
   VARIANTS = %i[default text surface container inverse].freeze
diff --git a/app/components/link_component.html.erb b/app/components/DS/link.html.erb
similarity index 100%
rename from app/components/link_component.html.erb
rename to app/components/DS/link.html.erb
diff --git a/app/components/link_component.rb b/app/components/DS/link.rb
similarity index 94%
rename from app/components/link_component.rb
rename to app/components/DS/link.rb
index 4bbe10e5..209f86b0 100644
--- a/app/components/link_component.rb
+++ b/app/components/DS/link.rb
@@ -1,6 +1,6 @@
 # An extension to `link_to` helper.  All options are passed through to the `link_to` helper with some additional
 # options available.
-class LinkComponent < ButtonishComponent
+class DS::Link < DS::Buttonish
   attr_reader :frame
 
   VARIANTS = VARIANTS.reverse_merge(
diff --git a/app/components/menu_component.html.erb b/app/components/DS/menu.html.erb
similarity index 59%
rename from app/components/menu_component.html.erb
rename to app/components/DS/menu.html.erb
index 00f19b2a..d4f0ea8d 100644
--- a/app/components/menu_component.html.erb
+++ b/app/components/DS/menu.html.erb
@@ -1,17 +1,17 @@
-<%= tag.div data: { controller: "menu", menu_placement_value: placement, menu_offset_value: offset, testid: testid } do %>
+<%= tag.div data: { controller: "DS--menu", DS__menu_placement_value: placement, DS__menu_offset_value: offset, testid: testid } do %>
   <% if variant == :icon %>
-    <%= render ButtonComponent.new(variant: "icon", icon: icon_vertical ? "more-vertical" : "more-horizontal", data: { menu_target: "button" }) %>
+    <%= render DS::Button.new(variant: "icon", icon: icon_vertical ? "more-vertical" : "more-horizontal", data: { DS__menu_target: "button" }) %>
   <% elsif variant == :button %>
     <%= button %>
   <% elsif variant == :avatar %>
-    <button data-menu-target="button">
+    <button data-DS--menu-target="button">
       <div class="w-9 h-9 cursor-pointer">
         <%= render "settings/user_avatar", avatar_url: avatar_url, initials: initials %>
       </div>
     </button>
   <% end %>
 
-  <div data-menu-target="content" class="px-2 lg:px-0 max-w-full hidden z-50">
+  <div data-DS--menu-target="content" class="px-2 lg:px-0 max-w-full hidden z-50">
     <div class="mx-auto min-w-[200px] shadow-border-xs bg-container rounded-lg">
       <%= header %>
 
diff --git a/app/components/menu_component.rb b/app/components/DS/menu.rb
similarity index 81%
rename from app/components/menu_component.rb
rename to app/components/DS/menu.rb
index 850031fa..39ef35e9 100644
--- a/app/components/menu_component.rb
+++ b/app/components/DS/menu.rb
@@ -1,15 +1,15 @@
 # frozen_string_literal: true
 
-class MenuComponent < ViewComponent::Base
+class DS::Menu < DesignSystemComponent
   attr_reader :variant, :avatar_url, :initials, :placement, :offset, :icon_vertical, :no_padding, :testid
 
   renders_one :button, ->(**button_options, &block) do
-    options_with_target = button_options.merge(data: { menu_target: "button" })
+    options_with_target = button_options.merge(data: { DS__menu_target: "button" })
 
     if block
       content_tag(:button, **options_with_target, &block)
     else
-      ButtonComponent.new(**options_with_target)
+      DS::Button.new(**options_with_target)
     end
   end
 
@@ -19,7 +19,7 @@ class MenuComponent < ViewComponent::Base
 
   renders_one :custom_content
 
-  renders_many :items, MenuItemComponent
+  renders_many :items, DS::MenuItem
 
   VARIANTS = %i[icon button avatar].freeze
 
diff --git a/app/components/menu_controller.js b/app/components/DS/menu_controller.js
similarity index 100%
rename from app/components/menu_controller.js
rename to app/components/DS/menu_controller.js
diff --git a/app/components/menu_item_component.html.erb b/app/components/DS/menu_item.html.erb
similarity index 100%
rename from app/components/menu_item_component.html.erb
rename to app/components/DS/menu_item.html.erb
diff --git a/app/components/menu_item_component.rb b/app/components/DS/menu_item.rb
similarity index 97%
rename from app/components/menu_item_component.rb
rename to app/components/DS/menu_item.rb
index 9270de11..5b099e7a 100644
--- a/app/components/menu_item_component.rb
+++ b/app/components/DS/menu_item.rb
@@ -1,4 +1,4 @@
-class MenuItemComponent < ViewComponent::Base
+class DS::MenuItem < DesignSystemComponent
   VARIANTS = %i[link button divider].freeze
 
   attr_reader :variant, :text, :icon, :href, :method, :destructive, :confirm, :frame, :opts
diff --git a/app/components/tab_component.rb b/app/components/DS/tab.rb
similarity index 75%
rename from app/components/tab_component.rb
rename to app/components/DS/tab.rb
index fc084a1a..d1e7e7a9 100644
--- a/app/components/tab_component.rb
+++ b/app/components/DS/tab.rb
@@ -1,4 +1,4 @@
-class TabComponent < ViewComponent::Base
+class DS::Tab < DesignSystemComponent
   attr_reader :id, :label
 
   def initialize(id:, label:)
diff --git a/app/components/DS/tabs.html.erb b/app/components/DS/tabs.html.erb
new file mode 100644
index 00000000..78ca02dd
--- /dev/null
+++ b/app/components/DS/tabs.html.erb
@@ -0,0 +1,18 @@
+<%= tag.div data: {
+  controller: "DS--tabs",
+  testid: testid,
+  DS__tabs_session_key_value: session_key,
+  DS__tabs_url_param_key_value: url_param_key,
+  DS__tabs_nav_btn_active_class: active_btn_classes,
+  DS__tabs_nav_btn_inactive_class: inactive_btn_classes
+} do %>
+  <% if unstyled? %>
+    <%= content %>
+  <% else %>
+    <%= nav %>
+
+    <% panels.each do |panel| %>
+      <%= panel %>
+    <% end %>
+  <% end %>
+<% end %>
diff --git a/app/components/tabs_component.rb b/app/components/DS/tabs.rb
similarity index 94%
rename from app/components/tabs_component.rb
rename to app/components/DS/tabs.rb
index 747a9420..a2c0ff95 100644
--- a/app/components/tabs_component.rb
+++ b/app/components/DS/tabs.rb
@@ -1,6 +1,6 @@
-class TabsComponent < ViewComponent::Base
+class DS::Tabs < DesignSystemComponent
   renders_one :nav, ->(classes: nil) do
-    Tabs::NavComponent.new(
+    DS::Tabs::Nav.new(
       active_tab: active_tab,
       active_btn_classes: active_btn_classes,
       inactive_btn_classes: inactive_btn_classes,
@@ -13,7 +13,7 @@ class TabsComponent < ViewComponent::Base
     content_tag(
       :div,
       class: ("hidden" unless tab_id == active_tab),
-      data: { id: tab_id, tabs_target: "panel" },
+      data: { id: tab_id, DS__tabs_target: "panel" },
       &block
     )
   end
diff --git a/app/components/tabs/nav_component.rb b/app/components/DS/tabs/nav.rb
similarity index 87%
rename from app/components/tabs/nav_component.rb
rename to app/components/DS/tabs/nav.rb
index 2c4e81ca..8e795588 100644
--- a/app/components/tabs/nav_component.rb
+++ b/app/components/DS/tabs/nav.rb
@@ -1,4 +1,4 @@
-class Tabs::NavComponent < ViewComponent::Base
+class DS::Tabs::Nav < DesignSystemComponent
   erb_template <<~ERB
     <%= tag.nav class: classes do %>
       <% btns.each do |btn| %>
@@ -12,7 +12,7 @@ class Tabs::NavComponent < ViewComponent::Base
       :button, label, id: id,
       type: "button",
       class: class_names(btn_classes, id == active_tab ? active_btn_classes : inactive_btn_classes, classes),
-      data: { id: id, action: "tabs#show", tabs_target: "navBtn" },
+      data: { id: id, action: "DS--tabs#show", DS__tabs_target: "navBtn" },
       &block
     )
   end
diff --git a/app/components/tabs/panel_component.rb b/app/components/DS/tabs/panel.rb
similarity index 69%
rename from app/components/tabs/panel_component.rb
rename to app/components/DS/tabs/panel.rb
index 3c34932a..f354e312 100644
--- a/app/components/tabs/panel_component.rb
+++ b/app/components/DS/tabs/panel.rb
@@ -1,4 +1,4 @@
-class Tabs::PanelComponent < ViewComponent::Base
+class DS::Tabs::Panel < DesignSystemComponent
   attr_reader :tab_id
 
   def initialize(tab_id:)
diff --git a/app/components/tabs_controller.js b/app/components/DS/tabs_controller.js
similarity index 100%
rename from app/components/tabs_controller.js
rename to app/components/DS/tabs_controller.js
diff --git a/app/components/toggle_component.html.erb b/app/components/DS/toggle.html.erb
similarity index 100%
rename from app/components/toggle_component.html.erb
rename to app/components/DS/toggle.html.erb
diff --git a/app/components/toggle_component.rb b/app/components/DS/toggle.rb
similarity index 95%
rename from app/components/toggle_component.rb
rename to app/components/DS/toggle.rb
index e3af85a8..c384a296 100644
--- a/app/components/toggle_component.rb
+++ b/app/components/DS/toggle.rb
@@ -1,4 +1,4 @@
-class ToggleComponent < ViewComponent::Base
+class DS::Toggle < DesignSystemComponent
   attr_reader :id, :name, :checked, :disabled, :checked_value, :unchecked_value, :opts
 
   def initialize(id:, name: nil, checked: false, disabled: false, checked_value: "1", unchecked_value: "0", **opts)
diff --git a/app/components/UI/account_page.html.erb b/app/components/UI/account_page.html.erb
index 7b02d30f..9b7c01ab 100644
--- a/app/components/UI/account_page.html.erb
+++ b/app/components/UI/account_page.html.erb
@@ -8,7 +8,7 @@
 
     <div class="min-h-[800px]" data-testid="account-details">
       <% if tabs.count > 1 %>
-        <%= render TabsComponent.new(active_tab: active_tab, url_param_key: "tab") do |tabs_container| %>
+        <%= render DS::Tabs.new(active_tab: active_tab, url_param_key: "tab") do |tabs_container| %>
           <% tabs_container.with_nav(classes: "max-w-fit") do |nav| %>
             <% tabs.each do |tab| %>
               <% nav.with_btn(id: tab, label: tab.to_s.humanize, classes: "px-6") %>
diff --git a/app/components/design_system_component.rb b/app/components/design_system_component.rb
new file mode 100644
index 00000000..35d21681
--- /dev/null
+++ b/app/components/design_system_component.rb
@@ -0,0 +1,2 @@
+class DesignSystemComponent < ViewComponent::Base
+end
diff --git a/app/components/tabs_component.html.erb b/app/components/tabs_component.html.erb
deleted file mode 100644
index bfceddad..00000000
--- a/app/components/tabs_component.html.erb
+++ /dev/null
@@ -1,18 +0,0 @@
-<%= tag.div data: {
-  controller: "tabs",
-  testid: testid,
-  tabs_session_key_value: session_key,
-  tabs_url_param_key_value: url_param_key,
-  tabs_nav_btn_active_class: active_btn_classes,
-  tabs_nav_btn_inactive_class: inactive_btn_classes
-} do %>
-  <% if unstyled? %>
-    <%= content %>
-  <% else %>
-    <%= nav %>
-
-    <% panels.each do |panel| %>
-      <%= panel %>
-    <% end %>
-  <% end %>
-<% end %>
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 094cd840..3ec81e82 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -21,7 +21,7 @@ module ApplicationHelper
     if custom
       inline_svg_tag("#{key}.svg", class: icon_classes, **opts)
     elsif as_button
-      render ButtonComponent.new(variant: "icon", class: extra_classes, icon: key, size: size, type: "button", **opts)
+      render DS::Button.new(variant: "icon", class: extra_classes, icon: key, size: size, type: "button", **opts)
     else
       lucide_icon(key, class: icon_classes, **opts)
     end
diff --git a/app/helpers/styled_form_builder.rb b/app/helpers/styled_form_builder.rb
index b614255d..f90888d7 100644
--- a/app/helpers/styled_form_builder.rb
+++ b/app/helpers/styled_form_builder.rb
@@ -50,7 +50,7 @@ class StyledFormBuilder < ActionView::Helpers::FormBuilder
     checked = object ? object.send(method) : options[:checked]
 
     @template.render(
-      ToggleComponent.new(
+      DS::Toggle.new(
         id: field_id,
         name: field_name,
         checked: checked,
@@ -67,7 +67,7 @@ class StyledFormBuilder < ActionView::Helpers::FormBuilder
     value ||= submit_default_value
 
     @template.render(
-      ButtonComponent.new(
+      DS::Button.new(
         text: value,
         data: (options[:data] || {}).merge({ turbo_submits_with: "Submitting..." }),
         full_width: true
diff --git a/app/views/accounts/_account.html.erb b/app/views/accounts/_account.html.erb
index 9430d605..b1e1be99 100644
--- a/app/views/accounts/_account.html.erb
+++ b/app/views/accounts/_account.html.erb
@@ -41,7 +41,7 @@
       <% end %>
 
       <% if account.draft? %>
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
           text: "Complete setup",
           href: edit_account_path(account, return_to: return_to),
           variant: :outline,
@@ -49,7 +49,7 @@
         ) %>
       <% elsif account.active? || account.disabled? %>
         <%= form_with model: account, url: toggle_active_account_path(account), method: :patch, data: { turbo_frame: "_top", controller: "auto-submit-form" } do |f| %>
-          <%= render ToggleComponent.new(
+          <%= render DS::Toggle.new(
             id: "account_#{account.id}_active",
             name: "active",
             checked: account.active?,
diff --git a/app/views/accounts/_account_sidebar_tabs.html.erb b/app/views/accounts/_account_sidebar_tabs.html.erb
index 182bdd6e..8951cc3c 100644
--- a/app/views/accounts/_account_sidebar_tabs.html.erb
+++ b/app/views/accounts/_account_sidebar_tabs.html.erb
@@ -21,7 +21,7 @@
     </details>
   <% end %>
 
-  <%= render TabsComponent.new(active_tab: active_tab, session_key: "account_sidebar_tab", testid: "account-sidebar-tabs") do |tabs| %>
+  <%= render DS::Tabs.new(active_tab: active_tab, session_key: "account_sidebar_tab", testid: "account-sidebar-tabs") do |tabs| %>
     <% tabs.with_nav do |nav| %>
       <% nav.with_btn(id: "asset", label: "Assets") %>
       <% nav.with_btn(id: "liability", label: "Debts") %>
@@ -30,7 +30,7 @@
 
     <% tabs.with_panel(tab_id: "asset") do %>
       <div class="space-y-2">
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
           text: "New asset",
           variant: "ghost",
           href: new_account_path(step: "method_select", classification: "asset"),
@@ -50,7 +50,7 @@
 
     <% tabs.with_panel(tab_id: "liability") do %>
       <div class="space-y-2">
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
             text: "New debt",
             variant: "ghost",
             href: new_account_path(step: "method_select", classification: "liability"),
@@ -70,7 +70,7 @@
 
     <% tabs.with_panel(tab_id: "all") do %>
       <div class="space-y-2">
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
             text: "New account",
             variant: "ghost",
             full_width: true,
diff --git a/app/views/accounts/_account_type.html.erb b/app/views/accounts/_account_type.html.erb
index 9eb98d6e..741ace78 100644
--- a/app/views/accounts/_account_type.html.erb
+++ b/app/views/accounts/_account_type.html.erb
@@ -2,7 +2,7 @@
 
 <%= link_to new_polymorphic_path(accountable, step: "method_select", return_to: params[:return_to]),
             class: "flex items-center gap-4 w-full text-center focus:outline-hidden hover:bg-surface-hover focus:bg-surface-hover fg-primary border border-transparent block px-2 rounded-lg p-2" do %>
-  <%= render FilledIconComponent.new(
+  <%= render DS::FilledIcon.new(
     icon: accountable.icon,
     hex_color: accountable.color,
   ) %>
diff --git a/app/views/accounts/_accountable_group.html.erb b/app/views/accounts/_accountable_group.html.erb
index ccca2088..e3ae8d5a 100644
--- a/app/views/accounts/_accountable_group.html.erb
+++ b/app/views/accounts/_accountable_group.html.erb
@@ -2,7 +2,7 @@
 
 <div id="<%= account_group.dom_id(tab: all_tab ? :all : nil, mobile: mobile) %>">
   <% is_open = open.nil? ? account_group.accounts.any? { |account| page_active?(account_path(account)) } : open %>
-  <%= render DisclosureComponent.new(align: :left, open: is_open) do |disclosure| %>
+  <%= render DS::Disclosure.new(align: :left, open: is_open) do |disclosure| %>
     <% disclosure.with_summary_content do %>
       <div class="flex items-center gap-3">
         <%= icon "chevron-right", class: "group-open:transform group-open:rotate-90" %>
@@ -51,7 +51,7 @@
     </div>
 
     <div class="my-2">
-      <%= render LinkComponent.new(
+      <%= render DS::Link.new(
       href: new_polymorphic_path(account_group.key, step: "method_select"),
       text: "New #{account_group.name.downcase.singularize}",
       icon: "plus",
diff --git a/app/views/accounts/_empty.html.erb b/app/views/accounts/_empty.html.erb
index a1eef715..4583616f 100644
--- a/app/views/accounts/_empty.html.erb
+++ b/app/views/accounts/_empty.html.erb
@@ -3,7 +3,7 @@
     <%= tag.p t(".no_accounts"), class: "text-primary mb-1 font-medium" %>
     <%= tag.p t(".empty_message"), class: "text-secondary mb-4" %>
 
-    <%= render LinkComponent.new(
+    <%= render DS::Link.new(
       text: t(".new_account"),
       href: new_account_path,
       frame: :modal
diff --git a/app/views/accounts/_form.html.erb b/app/views/accounts/_form.html.erb
index ef2e0af5..d2139b56 100644
--- a/app/views/accounts/_form.html.erb
+++ b/app/views/accounts/_form.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (account:, url:) %>
 
 <% if @error_message.present? %>
-  <%= render AlertComponent.new(message: @error_message, variant: :error) %>
+  <%= render DS::Alert.new(message: @error_message, variant: :error) %>
 <% end %>
 
 <%= styled_form_with model: account, url: url, scope: :account, data: { turbo: false }, class: "flex flex-col gap-4 justify-between grow text-primary" do |form| %>
diff --git a/app/views/accounts/_logo.html.erb b/app/views/accounts/_logo.html.erb
index 8eec2153..1da8e0bc 100644
--- a/app/views/accounts/_logo.html.erb
+++ b/app/views/accounts/_logo.html.erb
@@ -12,5 +12,5 @@
 <% elsif account.logo.attached? %>
   <%= image_tag account.logo, class: "shrink-0 rounded-full #{size_classes[size]}" %>
 <% else %>
-  <%= render FilledIconComponent.new(variant: :text, hex_color: color || account.accountable.color, text: account.name, size: size, rounded: true) %>
+  <%= render DS::FilledIcon.new(variant: :text, hex_color: color || account.accountable.color, text: account.name, size: size, rounded: true) %>
 <% end %>
diff --git a/app/views/accounts/index.html.erb b/app/views/accounts/index.html.erb
index 35e647ea..ff45d33f 100644
--- a/app/views/accounts/index.html.erb
+++ b/app/views/accounts/index.html.erb
@@ -2,7 +2,7 @@
   <h1 class="text-xl"><%= t(".accounts") %></h1>
   <div class="flex items-center gap-5">
     <div class="flex items-center gap-2">
-      <%= render LinkComponent.new(
+      <%= render DS::Link.new(
         text: "New account",
         href: new_account_path(return_to: accounts_path),
         variant: "primary",
diff --git a/app/views/accounts/new.html.erb b/app/views/accounts/new.html.erb
index 1ca5229e..35407561 100644
--- a/app/views/accounts/new.html.erb
+++ b/app/views/accounts/new.html.erb
@@ -25,7 +25,7 @@
       <%= button_to imports_path(import: { type: "AccountImport" }),
               data: { turbo_frame: :_top },
             class: "flex items-center gap-4 w-full text-center focus:outline-hidden hover:bg-surface-hover focus:bg-surface-hover fg-primary border border-transparent block px-2 rounded-lg p-2" do %>
-        <%= render FilledIconComponent.new(
+        <%= render DS::FilledIcon.new(
           icon: "download",
           hex_color: "#F79009",
         ) %>
diff --git a/app/views/accounts/new/_container.html.erb b/app/views/accounts/new/_container.html.erb
index 2d3582f7..47a75ca9 100644
--- a/app/views/accounts/new/_container.html.erb
+++ b/app/views/accounts/new/_container.html.erb
@@ -1,11 +1,11 @@
 <%# locals: (title:, back_path: nil) %>
 
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <div class="flex flex-col relative" data-controller="list-keyboard-navigation">
     <div class="border-b border-tertiary md:border-alpha-black-25 px-4 pb-4 text-gray-800 flex items-center justify-between gap-2">
       <div class="flex items-center gap-2">
         <% if back_path %>
-          <%= render LinkComponent.new(
+          <%= render DS::Link.new(
           variant: "icon",
           icon: "arrow-left",
           href: back_path,
diff --git a/app/views/accounts/show/_activity.html.erb b/app/views/accounts/show/_activity.html.erb
index 3c454f2d..63e77110 100644
--- a/app/views/accounts/show/_activity.html.erb
+++ b/app/views/accounts/show/_activity.html.erb
@@ -5,7 +5,7 @@
     <div class="flex items-center justify-between mb-4" data-testid="activity-menu">
       <%= tag.h2 t(".title"), class: "font-medium text-lg" %>
       <% unless @account.plaid_account_id.present? %>
-        <%= render MenuComponent.new(variant: "button") do |menu| %>
+        <%= render DS::Menu.new(variant: "button") do |menu| %>
           <% menu.with_button(text: "New", variant: "secondary", icon: "plus") %>
 
           <% menu.with_item(
diff --git a/app/views/accounts/show/_header.html.erb b/app/views/accounts/show/_header.html.erb
index 06bcc3e2..421f188d 100644
--- a/app/views/accounts/show/_header.html.erb
+++ b/app/views/accounts/show/_header.html.erb
@@ -10,7 +10,7 @@
           <div class="flex items-center gap-3">
             <h2 class="font-medium text-xl truncate <%= "animate-pulse" if account.syncing? %>"><%= title %></h2>
             <% if account.draft? %>
-              <%= render LinkComponent.new(
+              <%= render DS::Link.new(
                   text: "Complete setup",
                   href: edit_account_path(account),
                   variant: :outline,
diff --git a/app/views/accounts/show/_menu.html.erb b/app/views/accounts/show/_menu.html.erb
index 0691f34e..ef98ae9e 100644
--- a/app/views/accounts/show/_menu.html.erb
+++ b/app/views/accounts/show/_menu.html.erb
@@ -1,6 +1,6 @@
 <%# locals: (account:) %>
 
-<%= render MenuComponent.new(testid: "account-menu") do |menu| %>
+<%= render DS::Menu.new(testid: "account-menu") do |menu| %>
   <% menu.with_item(variant: "link", text: "Edit", href: edit_account_path(account), icon: "pencil-line", data: { turbo_frame: :modal }) %>
 
   <% unless account.crypto? %>
diff --git a/app/views/budget_categories/_budget_category.html.erb b/app/views/budget_categories/_budget_category.html.erb
index 6ae6ff38..81e857a2 100644
--- a/app/views/budget_categories/_budget_category.html.erb
+++ b/app/views/budget_categories/_budget_category.html.erb
@@ -12,7 +12,7 @@
         <% if budget_category.category.lucide_icon %>
           <%= icon(budget_category.category.lucide_icon, color: "current") %>
         <% else %>
-          <%= render FilledIconComponent.new(
+          <%= render DS::FilledIcon.new(
             variant: :text,
             hex_color: budget_category.category.color,
             text: budget_category.category.name,
diff --git a/app/views/budget_categories/_confirm_button.html.erb b/app/views/budget_categories/_confirm_button.html.erb
index f7e00a22..a9d98331 100644
--- a/app/views/budget_categories/_confirm_button.html.erb
+++ b/app/views/budget_categories/_confirm_button.html.erb
@@ -1,5 +1,5 @@
 <div id="<%= dom_id(budget, :confirm_button) %>">
-  <%= render ButtonComponent.new(
+  <%= render DS::Button.new(
     text: "Confirm",
     variant: "primary",
     full_width: true,
diff --git a/app/views/budget_categories/_no_categories.html.erb b/app/views/budget_categories/_no_categories.html.erb
index 927a0b2b..44d8915b 100644
--- a/app/views/budget_categories/_no_categories.html.erb
+++ b/app/views/budget_categories/_no_categories.html.erb
@@ -6,12 +6,12 @@
     </p>
 
     <div class="flex items-center gap-2">
-      <%= render ButtonComponent.new(
+      <%= render DS::Button.new(
         text: "Use defaults (recommended)",
         href: bootstrap_categories_path,
       ) %>
 
-      <%= render LinkComponent.new(
+      <%= render DS::Link.new(
         text: "New category",
         variant: "outline",
         icon: "plus",
diff --git a/app/views/budget_categories/show.html.erb b/app/views/budget_categories/show.html.erb
index d6e3ea1b..affb01af 100644
--- a/app/views/budget_categories/show.html.erb
+++ b/app/views/budget_categories/show.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new(variant: :drawer) do |dialog| %>
+<%= render DS::Dialog.new(variant: :drawer) do |dialog| %>
   <% dialog.with_header do %>
     <div>
       <p class="text-sm text-secondary">Category</p>
@@ -119,7 +119,7 @@
               <% end %>
             </ul>
 
-            <%= render LinkComponent.new(
+            <%= render DS::Link.new(
               text: "View all category transactions",
               variant: "outline",
               full_width: true,
diff --git a/app/views/budgets/_budget_donut.html.erb b/app/views/budgets/_budget_donut.html.erb
index 384830e5..8726f4e4 100644
--- a/app/views/budgets/_budget_donut.html.erb
+++ b/app/views/budgets/_budget_donut.html.erb
@@ -12,7 +12,7 @@
           <%= format_money(budget.actual_spending_money) %>
         </div>
 
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
           text: "of #{budget.budgeted_spending_money.format}",
           variant: "secondary",
           icon: "pencil",
@@ -25,7 +25,7 @@
           <span><%= format_money Money.new(0, budget.currency || budget.family.currency) %></span>
         </div>
 
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
           text: "New budget",
           size: "sm",
           icon: "plus",
@@ -46,7 +46,7 @@
             <%= format_money(bc.actual_spending_money) %>
           </p>
 
-          <%= render LinkComponent.new(
+          <%= render DS::Link.new(
             text: "of #{bc.budgeted_spending_money.format(precision: 0)}",
             variant: "secondary",
             icon: "pencil",
diff --git a/app/views/budgets/_budget_header.html.erb b/app/views/budgets/_budget_header.html.erb
index c6c8ce21..6f7d59fc 100644
--- a/app/views/budgets/_budget_header.html.erb
+++ b/app/views/budgets/_budget_header.html.erb
@@ -3,7 +3,7 @@
 <div class="flex items-center gap-1 mb-4">
   <div class="flex items-center gap-2">
     <% if budget.previous_budget_param %>
-      <%= render LinkComponent.new(
+      <%= render DS::Link.new(
         variant: "icon",
         icon: "chevron-left",
         href: budget_path(budget.previous_budget_param),
@@ -15,7 +15,7 @@
     <% end %>
 
     <% if budget.next_budget_param %>
-      <%= render LinkComponent.new(
+      <%= render DS::Link.new(
         variant: "icon",
         icon: "chevron-right",
         href: budget_path(budget.next_budget_param),
@@ -27,7 +27,7 @@
     <% end %>
   </div>
 
-  <%= render MenuComponent.new(variant: "button") do |menu| %>
+  <%= render DS::Menu.new(variant: "button") do |menu| %>
     <% menu.with_button class: "flex items-center gap-1 hover:bg-alpha-black-25 cursor-pointer rounded-md p-2"  do %>
       <span class="text-primary font-medium text-lg lg:text-base"><%= @budget.name %></span>
       <%= icon("chevron-down") %>
@@ -39,7 +39,7 @@
   <% end %>
 
   <div class="ml-auto">
-    <%= render LinkComponent.new(
+    <%= render DS::Link.new(
         text: "Today",
         variant: "outline",
         href: budget_path(Budget.date_to_param(Date.current)),
diff --git a/app/views/budgets/_over_allocation_warning.html.erb b/app/views/budgets/_over_allocation_warning.html.erb
index 8d9f5913..bd75fba2 100644
--- a/app/views/budgets/_over_allocation_warning.html.erb
+++ b/app/views/budgets/_over_allocation_warning.html.erb
@@ -4,7 +4,7 @@
   <%= icon "alert-triangle", size: "lg", color: "destructive" %>
   <p class="text-secondary text-sm text-center">You have over-allocated your budget.  Please fix your allocations.</p>
 
-  <%= render LinkComponent.new(
+  <%= render DS::Link.new(
     text: "Fix allocations",
     variant: "secondary",
     size: "sm",
diff --git a/app/views/budgets/_picker.html.erb b/app/views/budgets/_picker.html.erb
index 4b112f30..a1deaea0 100644
--- a/app/views/budgets/_picker.html.erb
+++ b/app/views/budgets/_picker.html.erb
@@ -38,7 +38,7 @@
         <% param_key = Budget.date_to_param(date) %>
 
         <% if Budget.budget_date_valid?(date, family: family) %>
-          <%= render LinkComponent.new(
+          <%= render DS::Link.new(
             variant: "ghost",
             text: month_name,
             href: budget_path(param_key),
diff --git a/app/views/budgets/edit.html.erb b/app/views/budgets/edit.html.erb
index 546aa54b..3ec00b22 100644
--- a/app/views/budgets/edit.html.erb
+++ b/app/views/budgets/edit.html.erb
@@ -29,7 +29,7 @@
               </p>
             </div>
 
-            <%= render ToggleComponent.new(
+            <%= render DS::Toggle.new(
               id: "auto_fill",
               data: {
                 action: "change->budget-form#toggleAutoFill",
diff --git a/app/views/budgets/show.html.erb b/app/views/budgets/show.html.erb
index ff19bab1..de47b27c 100644
--- a/app/views/budgets/show.html.erb
+++ b/app/views/budgets/show.html.erb
@@ -18,7 +18,7 @@
       <div>
 
         <% if @budget.initialized? && @budget.available_to_allocate.positive? %>
-          <%= render TabsComponent.new(active_tab: params[:tab].presence || "budgeted") do |tabs| %>
+          <%= render DS::Tabs.new(active_tab: params[:tab].presence || "budgeted") do |tabs| %>
             <% tabs.with_nav do |nav| %>
               <% nav.with_btn(id: "budgeted", label: "Budgeted") %>
               <% nav.with_btn(id: "actuals", label: "Actual") %>
@@ -49,7 +49,7 @@
         <h2 class="text-lg font-medium">Categories</h2>
 
         <% if @budget.initialized? %>
-          <%= render LinkComponent.new(
+          <%= render DS::Link.new(
             text: "Edit",
             variant: "secondary",
             icon: "settings-2",
diff --git a/app/views/categories/_category.html.erb b/app/views/categories/_category.html.erb
index 1b49a045..dbc9b80f 100644
--- a/app/views/categories/_category.html.erb
+++ b/app/views/categories/_category.html.erb
@@ -12,7 +12,7 @@
   </div>
 
   <div class="justify-self-end">
-    <%= render MenuComponent.new do |menu| %>
+    <%= render DS::Menu.new do |menu| %>
       <% menu.with_item(variant: "link", text: t(".edit"), icon: "pencil", href: edit_category_path(category), data: { turbo_frame: :modal }) %>
 
       <% if category.transactions.any? %>
diff --git a/app/views/categories/_menu.html.erb b/app/views/categories/_menu.html.erb
index d6ec5d0b..f7c74eac 100644
--- a/app/views/categories/_menu.html.erb
+++ b/app/views/categories/_menu.html.erb
@@ -1,6 +1,6 @@
 <%# locals: (transaction:) %>
 
-<%= render MenuComponent.new(variant: "button") do |menu| %>
+<%= render DS::Menu.new(variant: "button") do |menu| %>
   <% menu.with_button do %>
     <% render partial: "categories/badge", locals: { category: transaction.category } %>
   <% end %>
diff --git a/app/views/categories/edit.html.erb b/app/views/categories/edit.html.erb
index dd8eb41c..b71dac59 100644
--- a/app/views/categories/edit.html.erb
+++ b/app/views/categories/edit.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".edit")) %>
   <% dialog.with_body do %>
     <%= render "form", category: @category, categories: @categories %>
diff --git a/app/views/categories/index.html.erb b/app/views/categories/index.html.erb
index e15c0976..0c873915 100644
--- a/app/views/categories/index.html.erb
+++ b/app/views/categories/index.html.erb
@@ -2,7 +2,7 @@
   <h1 class="text-primary text-xl font-medium"><%= t(".categories") %></h1>
 
   <div class="flex items-center gap-2">
-    <%= render MenuComponent.new do |menu| %>
+    <%= render DS::Menu.new do |menu| %>
       <% menu.with_item(
           variant: "button",
           text: "Delete all",
@@ -12,7 +12,7 @@
           confirm: CustomConfirm.for_resource_deletion("all categories", high_severity: true)) %>
     <% end %>
 
-    <%= render LinkComponent.new(
+    <%= render DS::Link.new(
       text: t(".new"),
       variant: "primary",
       icon: "plus",
@@ -38,12 +38,12 @@
       <div class="text-center flex flex-col items-center max-w-[500px]">
         <p class="text-sm text-secondary mb-4"><%= t(".empty") %></p>
         <div class="flex items-center gap-2">
-          <%= render ButtonComponent.new(
+          <%= render DS::Button.new(
             text: t(".bootstrap"),
             href: bootstrap_categories_path,
           ) %>
 
-          <%= render LinkComponent.new(
+          <%= render DS::Link.new(
             text: t(".new"),
             variant: "outline",
             icon: "plus",
diff --git a/app/views/categories/new.html.erb b/app/views/categories/new.html.erb
index 09ac5cd7..73f69f64 100644
--- a/app/views/categories/new.html.erb
+++ b/app/views/categories/new.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".new_category")) %>
   <% dialog.with_body do %>
     <%= render "form", category: @category, categories: @categories %>
diff --git a/app/views/category/deletions/new.html.erb b/app/views/category/deletions/new.html.erb
index b199b880..2de9c6c9 100644
--- a/app/views/category/deletions/new.html.erb
+++ b/app/views/category/deletions/new.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".delete_category"), subtitle: t(".explanation", category_name: @category.name)) %>
 
   <% dialog.with_body do %>
@@ -14,14 +14,14 @@
                             { prompt: t(".replacement_category_prompt"), label: t(".category"), container_class: "mb-4" },
                             data: { deletion_target: "replacementField", action: "deletion#chooseSubmitButton" } %>
 
-      <%= render ButtonComponent.new(
+      <%= render DS::Button.new(
         variant: "destructive",
         text: t(".delete_and_leave_uncategorized", category_name: @category.name),
         full_width: true,
         data: { deletion_target: "destructiveSubmitButton" }
       ) %>
 
-      <%= render ButtonComponent.new(
+      <%= render DS::Button.new(
         text: "Delete and reassign",
         data: { deletion_target: "safeSubmitButton" },
         hidden: true,
diff --git a/app/views/category/dropdowns/_row.html.erb b/app/views/category/dropdowns/_row.html.erb
index de1adff2..6e25d478 100644
--- a/app/views/category/dropdowns/_row.html.erb
+++ b/app/views/category/dropdowns/_row.html.erb
@@ -24,7 +24,7 @@
     <%= render partial: "categories/badge", locals: { category: category } %>
   <% end %>
 
-  <%= render MenuComponent.new do |menu| %>
+  <%= render DS::Menu.new do |menu| %>
     <% menu.with_item(variant: "link", text: t(".edit"), icon: "pencil-line", href: edit_category_path(category), data: { turbo_frame: :modal }) %>
     <% menu.with_item(variant: "link", text: t(".delete"), icon: "trash-2", href: new_category_deletion_path(category), data: { turbo_frame: :modal }, destructive: true) %>
   <% end %>
diff --git a/app/views/category/dropdowns/show.html.erb b/app/views/category/dropdowns/show.html.erb
index 6cc34e29..02ec05a7 100644
--- a/app/views/category/dropdowns/show.html.erb
+++ b/app/views/category/dropdowns/show.html.erb
@@ -29,7 +29,7 @@
             <div class="text-center flex flex-col items-center max-w-[500px]">
               <p class="text-sm text-secondary font-normal mb-4"><%= t(".empty") %></p>
 
-              <%= render ButtonComponent.new(
+              <%= render DS::Button.new(
               text: t(".bootstrap"),
               variant: "outline",
               href: bootstrap_categories_path,
diff --git a/app/views/chats/_chat.html.erb b/app/views/chats/_chat.html.erb
index 129cdbe7..9eb35a0f 100644
--- a/app/views/chats/_chat.html.erb
+++ b/app/views/chats/_chat.html.erb
@@ -11,7 +11,7 @@
     </p>
   </div>
 
-  <%= render MenuComponent.new(icon_vertical: true) do |menu| %>
+  <%= render DS::Menu.new(icon_vertical: true) do |menu| %>
     <% menu.with_item(
       variant: "link",
       text: "Edit chat title",
diff --git a/app/views/chats/_chat_nav.html.erb b/app/views/chats/_chat_nav.html.erb
index 5f4d44b5..6cf7d28f 100644
--- a/app/views/chats/_chat_nav.html.erb
+++ b/app/views/chats/_chat_nav.html.erb
@@ -4,7 +4,7 @@
   <% path = chat.new_record? ? chats_path : chats_path(previous_chat_id: chat.id) %>
 
   <div class="flex items-center gap-2 grow">
-    <%= render LinkComponent.new(
+    <%= render DS::Link.new(
       id: "chat-nav-back",
       variant: "icon",
       icon: "menu",
@@ -18,7 +18,7 @@
     </div>
   </div>
 
-  <%= render MenuComponent.new(icon_vertical: true) do |menu| %>
+  <%= render DS::Menu.new(icon_vertical: true) do |menu| %>
     <% menu.with_item(variant: "link", text: "Start new chat", href: new_chat_path, icon: "plus") %>
 
     <% unless chat.new_record? %>
diff --git a/app/views/chats/_error.html.erb b/app/views/chats/_error.html.erb
index d72dd13d..bbcb7581 100644
--- a/app/views/chats/_error.html.erb
+++ b/app/views/chats/_error.html.erb
@@ -10,7 +10,7 @@
   <div class="flex items-center justify-between gap-2">
     <p class="text-xs text-red-500">Failed to generate response.  Please try again.</p>
 
-    <%= render ButtonComponent.new(
+    <%= render DS::Button.new(
       text: "Retry",
       href: retry_chat_path(chat),
     ) %>
diff --git a/app/views/chats/index.html.erb b/app/views/chats/index.html.erb
index 1b8f6d1d..0f450748 100644
--- a/app/views/chats/index.html.erb
+++ b/app/views/chats/index.html.erb
@@ -5,7 +5,7 @@
         <div class="grow flex flex-col">
           <div class="flex items-center justify-between my-6">
             <h1 class="text-xl font-medium">Chats</h1>
-            <%= render LinkComponent.new(
+            <%= render DS::Link.new(
               id: "new-chat",
               icon: "plus",
               variant: "icon",
diff --git a/app/views/credit_cards/_overview.html.erb b/app/views/credit_cards/_overview.html.erb
index fec910e0..1dfcbb0b 100644
--- a/app/views/credit_cards/_overview.html.erb
+++ b/app/views/credit_cards/_overview.html.erb
@@ -27,7 +27,7 @@
 </div>
 
 <div class="flex justify-center py-8">
-  <%= render LinkComponent.new(
+  <%= render DS::Link.new(
     text: "Edit account details",
     variant: "ghost",
     href: edit_credit_card_path(account),
diff --git a/app/views/credit_cards/edit.html.erb b/app/views/credit_cards/edit.html.erb
index f30f68a0..5e95ffa5 100644
--- a/app/views/credit_cards/edit.html.erb
+++ b/app/views/credit_cards/edit.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".edit", account: @account.name)) %>
 
   <% dialog.with_body do %>
diff --git a/app/views/credit_cards/new.html.erb b/app/views/credit_cards/new.html.erb
index 95bca964..a81805f2 100644
--- a/app/views/credit_cards/new.html.erb
+++ b/app/views/credit_cards/new.html.erb
@@ -5,7 +5,7 @@
              show_eu_link: @show_eu_link,
              accountable_type: "CreditCard" %>
 <% else %>
-  <%= render DialogComponent.new do |dialog| %>
+  <%= render DS::Dialog.new do |dialog| %>
     <% dialog.with_header(title: t(".title")) %>
     <% dialog.with_body do %>
       <%= render "credit_cards/form", account: @account, url: credit_cards_path %>
diff --git a/app/views/cryptos/edit.html.erb b/app/views/cryptos/edit.html.erb
index 6b7812c2..0f08498d 100644
--- a/app/views/cryptos/edit.html.erb
+++ b/app/views/cryptos/edit.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".edit", account: @account.name)) %>
   <% dialog.with_body do %>
     <%= render "form", account: @account, url: crypto_path(@account) %>
diff --git a/app/views/cryptos/new.html.erb b/app/views/cryptos/new.html.erb
index 8e93242f..97fcccdc 100644
--- a/app/views/cryptos/new.html.erb
+++ b/app/views/cryptos/new.html.erb
@@ -5,7 +5,7 @@
              show_eu_link: @show_eu_link,
              accountable_type: "Crypto" %>
 <% else %>
-  <%= render DialogComponent.new do |dialog| %>
+  <%= render DS::Dialog.new do |dialog| %>
     <% dialog.with_header(title: t(".title")) %>
     <% dialog.with_body do %>
       <%= render "form", account: @account, url: cryptos_path %>
diff --git a/app/views/depositories/edit.html.erb b/app/views/depositories/edit.html.erb
index 03d3e668..5b265f41 100644
--- a/app/views/depositories/edit.html.erb
+++ b/app/views/depositories/edit.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".edit", account: @account.name)) %>
   <% dialog.with_body do %>
     <%= render "form", account: @account, url: depository_path(@account) %>
diff --git a/app/views/depositories/new.html.erb b/app/views/depositories/new.html.erb
index 23bbd79b..f75ed00b 100644
--- a/app/views/depositories/new.html.erb
+++ b/app/views/depositories/new.html.erb
@@ -5,7 +5,7 @@
              show_eu_link: @show_eu_link,
              accountable_type: "Depository" %>
 <% else %>
-  <%= render DialogComponent.new do |dialog| %>
+  <%= render DS::Dialog.new do |dialog| %>
     <% dialog.with_header(title: t(".title")) %>
     <% dialog.with_body do %>
       <%= render "depositories/form", account: @account, url: depositories_path %>
diff --git a/app/views/doorkeeper/authorizations/error.html.erb b/app/views/doorkeeper/authorizations/error.html.erb
index 8df12c18..401e191f 100644
--- a/app/views/doorkeeper/authorizations/error.html.erb
+++ b/app/views/doorkeeper/authorizations/error.html.erb
@@ -13,7 +13,7 @@
   </div>
 
   <div class="text-center">
-    <%= render LinkComponent.new(
+    <%= render DS::Link.new(
       text: "Go back",
       href: "javascript:history.back()",
       variant: :secondary
diff --git a/app/views/doorkeeper/authorizations/new.html.erb b/app/views/doorkeeper/authorizations/new.html.erb
index 4c3a727a..30c3ebfa 100644
--- a/app/views/doorkeeper/authorizations/new.html.erb
+++ b/app/views/doorkeeper/authorizations/new.html.erb
@@ -37,7 +37,7 @@
       <% if params[:display].present? %>
         <%= hidden_field_tag :display, params[:display], id: nil %>
       <% end %>
-      <%= render ButtonComponent.new(
+      <%= render DS::Button.new(
         text: t("doorkeeper.authorizations.buttons.authorize"),
         variant: :primary,
         size: :lg,
@@ -59,7 +59,7 @@
       <% if params[:display].present? %>
         <%= hidden_field_tag :display, params[:display], id: nil %>
       <% end %>
-      <%= render ButtonComponent.new(
+      <%= render DS::Button.new(
         text: t("doorkeeper.authorizations.buttons.deny"),
         variant: :outline,
         size: :lg,
diff --git a/app/views/family_merchants/_family_merchant.html.erb b/app/views/family_merchants/_family_merchant.html.erb
index 7614699c..bc69a25f 100644
--- a/app/views/family_merchants/_family_merchant.html.erb
+++ b/app/views/family_merchants/_family_merchant.html.erb
@@ -15,7 +15,7 @@
     </p>
   </div>
   <div class="justify-self-end">
-    <%= render MenuComponent.new do |menu| %>
+    <%= render DS::Menu.new do |menu| %>
       <% menu.with_item(variant: "link", text: "Edit", href: edit_family_merchant_path(family_merchant), icon: "pencil", data: { turbo_frame: "modal" }) %>
       <% menu.with_item(
         variant: "button",
diff --git a/app/views/family_merchants/edit.html.erb b/app/views/family_merchants/edit.html.erb
index 044ae422..f1dfd133 100644
--- a/app/views/family_merchants/edit.html.erb
+++ b/app/views/family_merchants/edit.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".title")) %>
   <% dialog.with_body do %>
     <%= render "form", family_merchant: @family_merchant %>
diff --git a/app/views/family_merchants/index.html.erb b/app/views/family_merchants/index.html.erb
index a65efeb0..1ca1e940 100644
--- a/app/views/family_merchants/index.html.erb
+++ b/app/views/family_merchants/index.html.erb
@@ -1,7 +1,7 @@
 <header class="flex items-center justify-between">
   <h1 class="text-primary text-xl font-medium">Merchants</h1>
 
-  <%= render LinkComponent.new(
+  <%= render DS::Link.new(
     text: "New merchant",
     variant: "primary",
     href: new_family_merchant_path,
@@ -29,7 +29,7 @@
       <div class="text-center flex flex-col items-center max-w-[300px]">
         <p class="text-primary mb-1 font-medium text-sm"><%= t(".empty") %></p>
 
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
           text: t(".new"),
           icon: "plus",
           href: new_family_merchant_path,
diff --git a/app/views/family_merchants/new.html.erb b/app/views/family_merchants/new.html.erb
index 044ae422..f1dfd133 100644
--- a/app/views/family_merchants/new.html.erb
+++ b/app/views/family_merchants/new.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".title")) %>
   <% dialog.with_body do %>
     <%= render "form", family_merchant: @family_merchant %>
diff --git a/app/views/holdings/_cash.html.erb b/app/views/holdings/_cash.html.erb
index 98ce1d3a..6fde392d 100644
--- a/app/views/holdings/_cash.html.erb
+++ b/app/views/holdings/_cash.html.erb
@@ -4,7 +4,7 @@
 
 <div class="grid grid-cols-12 items-center text-primary text-sm font-medium p-4">
   <div class="col-span-4 flex items-center gap-4">
-    <%= render FilledIconComponent.new(
+    <%= render DS::FilledIcon.new(
       variant: :text,
       text: currency.symbol,
       rounded: true,
diff --git a/app/views/holdings/show.html.erb b/app/views/holdings/show.html.erb
index 19e4b504..5088ef10 100644
--- a/app/views/holdings/show.html.erb
+++ b/app/views/holdings/show.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new(variant: "drawer") do |dialog| %>
+<%= render DS::Dialog.new(variant: "drawer") do |dialog| %>
   <% dialog.with_header do %>
     <div class="flex items-center justify-between">
       <div>
diff --git a/app/views/import/cleans/show.html.erb b/app/views/import/cleans/show.html.erb
index 4a743d01..c0bce7d7 100644
--- a/app/views/import/cleans/show.html.erb
+++ b/app/views/import/cleans/show.html.erb
@@ -17,7 +17,7 @@
         <p class="text-success text-sm">Your data has been cleaned</p>
       </div>
 
-      <%= render LinkComponent.new(
+      <%= render DS::Link.new(
         text: "Next step",
         variant: "primary",
         href: import_confirm_path(@import),
diff --git a/app/views/import/configurations/show.html.erb b/app/views/import/configurations/show.html.erb
index 89e53e07..5eb408b1 100644
--- a/app/views/import/configurations/show.html.erb
+++ b/app/views/import/configurations/show.html.erb
@@ -18,8 +18,8 @@
       <p class="text-sm text-secondary">We found a configuration from a previous import for this account.  Would you like to apply it to this import?</p>
 
       <div class="mt-4 flex gap-2 items-center">
-        <%= render LinkComponent.new(text: "Manually configure", href: import_configuration_path(@import), variant: "outline") %>
-        <%= render ButtonComponent.new(text: "Apply template", href: apply_template_import_path(@import), method: :put, data: { turbo_frame: :_top }) %>
+        <%= render DS::Link.new(text: "Manually configure", href: import_configuration_path(@import), variant: "outline") %>
+        <%= render DS::Button.new(text: "Apply template", href: apply_template_import_path(@import), method: :put, data: { turbo_frame: :_top }) %>
       </div>
     </div>
   </div>
diff --git a/app/views/import/confirms/_mappings.html.erb b/app/views/import/confirms/_mappings.html.erb
index 2fcb14ac..bd27ff32 100644
--- a/app/views/import/confirms/_mappings.html.erb
+++ b/app/views/import/confirms/_mappings.html.erb
@@ -11,7 +11,7 @@
           <div class="flex items-center justify-between p-4 gap-4 text-secondary bg-red-100 border border-red-200 rounded-lg w-[650px] min-w-0 mx-auto">
             <%= tag.p t(".no_accounts"), class: "text-sm" %>
 
-            <%= render LinkComponent.new(
+            <%= render DS::Link.new(
               text: "Create account",
               variant: "primary",
               href: new_account_path(return_to: import_confirm_path(import)),
@@ -25,7 +25,7 @@
         <div class="overflow-x-auto">
           <div class="flex items-center justify-between p-4 gap-4 text-secondary bg-yellow-100 border border-yellow-200 rounded-lg w-[650px] min-w-0 mx-auto">
             <%= tag.p t(".unassigned_account"), class: "text-sm" %>
-            <%= render LinkComponent.new(
+            <%= render DS::Link.new(
               text: t(".create_account"),
               variant: "primary",
               href: new_account_path(return_to: import_confirm_path(import)),
@@ -59,7 +59,7 @@
     </div>
 
     <div class="flex justify-center w-full">
-      <%= render LinkComponent.new(
+      <%= render DS::Link.new(
         text: "Next",
         variant: "primary",
         href: is_last_step ? import_path(import) : url_for(step: step_idx + 2),
diff --git a/app/views/import/uploads/show.html.erb b/app/views/import/uploads/show.html.erb
index 1f390617..1115382e 100644
--- a/app/views/import/uploads/show.html.erb
+++ b/app/views/import/uploads/show.html.erb
@@ -11,7 +11,7 @@
       <p class="text-secondary text-sm"><%= t(".description") %></p>
     </div>
 
-    <%= render TabsComponent.new(active_tab: params[:tab] || "csv-upload", url_param_key: "tab", testid: "import-tabs") do |tabs| %>
+    <%= render DS::Tabs.new(active_tab: params[:tab] || "csv-upload", url_param_key: "tab", testid: "import-tabs") do |tabs| %>
       <% tabs.with_nav do |nav| %>
         <% nav.with_btn(id: "csv-upload", label: "Upload CSV") %>
         <% nav.with_btn(id: "csv-paste", label: "Copy & Paste") %>
diff --git a/app/views/imports/_empty.html.erb b/app/views/imports/_empty.html.erb
index 8f147797..dc864ea0 100644
--- a/app/views/imports/_empty.html.erb
+++ b/app/views/imports/_empty.html.erb
@@ -2,7 +2,7 @@
   <div class="text-center flex flex-col items-center max-w-[300px] gap-4">
     <p class="text-primary mb-1 font-medium text-sm"><%= t(".message") %></p>
 
-    <%= render LinkComponent.new(
+    <%= render DS::Link.new(
       text: t(".new"),
       variant: "primary",
       href: new_import_path,
diff --git a/app/views/imports/_failure.html.erb b/app/views/imports/_failure.html.erb
index 533d4e52..ee9e8b9f 100644
--- a/app/views/imports/_failure.html.erb
+++ b/app/views/imports/_failure.html.erb
@@ -11,6 +11,6 @@
       <p class="text-sm text-secondary">Please check that your file format, for any errors and that all required fields are filled, then come back and try again.</p>
     </div>
 
-    <%= render ButtonComponent.new(text: "Try again", href: publish_import_path(import), full_width: true) %>
+    <%= render DS::Button.new(text: "Try again", href: publish_import_path(import), full_width: true) %>
   </div>
 </div>
diff --git a/app/views/imports/_import.html.erb b/app/views/imports/_import.html.erb
index 88a75dce..106b4d24 100644
--- a/app/views/imports/_import.html.erb
+++ b/app/views/imports/_import.html.erb
@@ -36,7 +36,7 @@
     <% end %>
   </div>
 
-  <%= render MenuComponent.new do |menu| %>
+  <%= render DS::Menu.new do |menu| %>
     <% menu.with_item(variant: "link", text: t(".view"), href: import_path(import), icon: "eye") %>
 
     <% if import.complete? || import.revert_failed? %>
diff --git a/app/views/imports/_importing.html.erb b/app/views/imports/_importing.html.erb
index 490132a8..43d61f54 100644
--- a/app/views/imports/_importing.html.erb
+++ b/app/views/imports/_importing.html.erb
@@ -12,8 +12,8 @@
     </div>
 
     <div class="space-y-2 flex flex-col">
-      <%= render LinkComponent.new(text: "Check status", href: import_path(import), variant: "primary", full_width: true) %>
-      <%= render LinkComponent.new(text: "Back to dashboard", href: root_path, variant: "secondary", full_width: true) %>
+      <%= render DS::Link.new(text: "Check status", href: import_path(import), variant: "primary", full_width: true) %>
+      <%= render DS::Link.new(text: "Back to dashboard", href: root_path, variant: "secondary", full_width: true) %>
     </div>
   </div>
 </div>
diff --git a/app/views/imports/_ready.html.erb b/app/views/imports/_ready.html.erb
index d093694f..9ab7c0eb 100644
--- a/app/views/imports/_ready.html.erb
+++ b/app/views/imports/_ready.html.erb
@@ -35,5 +35,5 @@
     </div>
   </div>
 
-  <%= render ButtonComponent.new(text: "Publish import", href: publish_import_path(import), full_width: true) %>
+  <%= render DS::Button.new(text: "Publish import", href: publish_import_path(import), full_width: true) %>
 </div>
diff --git a/app/views/imports/_revert_failure.html.erb b/app/views/imports/_revert_failure.html.erb
index 6eacd786..ae072b74 100644
--- a/app/views/imports/_revert_failure.html.erb
+++ b/app/views/imports/_revert_failure.html.erb
@@ -11,7 +11,7 @@
       <p class="text-sm text-secondary">Please try again or contact support.</p>
     </div>
 
-    <%= render ButtonComponent.new(
+    <%= render DS::Button.new(
       text: "Try again",
       full_width: true,
       href: revert_import_path(import)
diff --git a/app/views/imports/_success.html.erb b/app/views/imports/_success.html.erb
index a1130c0d..c0849e94 100644
--- a/app/views/imports/_success.html.erb
+++ b/app/views/imports/_success.html.erb
@@ -11,7 +11,7 @@
       <p class="text-sm text-secondary">Your imported data has been successfully added to the app and is now ready for use.</p>
     </div>
 
-    <%= render LinkComponent.new(
+    <%= render DS::Link.new(
       text: "Back to dashboard",
       variant: "primary",
       full_width: true,
diff --git a/app/views/imports/index.html.erb b/app/views/imports/index.html.erb
index 1a81ecdb..c2f2660f 100644
--- a/app/views/imports/index.html.erb
+++ b/app/views/imports/index.html.erb
@@ -1,7 +1,7 @@
 <div class="flex items-center justify-between">
   <h1 class="text-xl font-medium text-primary"><%= t(".title") %></h1>
 
-  <%= render LinkComponent.new(
+  <%= render DS::Link.new(
     text: "New import",
     href: new_import_path,
     icon: "plus",
diff --git a/app/views/imports/new.html.erb b/app/views/imports/new.html.erb
index a1fcbe0c..c436cb25 100644
--- a/app/views/imports/new.html.erb
+++ b/app/views/imports/new.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".title"), subtitle: t(".description")) %>
 
   <% dialog.with_body do %>
diff --git a/app/views/investments/edit.html.erb b/app/views/investments/edit.html.erb
index 433f118f..b9c83af4 100644
--- a/app/views/investments/edit.html.erb
+++ b/app/views/investments/edit.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".edit", account: @account.name)) %>
   <% dialog.with_body do %>
     <%= render "investments/form", account: @account, url: investment_path(@account) %>
diff --git a/app/views/investments/new.html.erb b/app/views/investments/new.html.erb
index 1c2fb8e4..acfaa6ed 100644
--- a/app/views/investments/new.html.erb
+++ b/app/views/investments/new.html.erb
@@ -5,7 +5,7 @@
              show_eu_link: @show_eu_link,
              accountable_type: "Investment" %>
 <% else %>
-  <%= render DialogComponent.new do |dialog| %>
+  <%= render DS::Dialog.new do |dialog| %>
     <% dialog.with_header(title: t(".title")) %>
     <% dialog.with_body do %>
       <%= render "investments/form", account: @account, url: investments_path %>
diff --git a/app/views/invitations/new.html.erb b/app/views/invitations/new.html.erb
index 71e4d624..6968f72d 100644
--- a/app/views/invitations/new.html.erb
+++ b/app/views/invitations/new.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".title"), subtitle: t(".subtitle")) %>
 
   <% dialog.with_body do %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index e8fc202e..c053e04d 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -60,7 +60,7 @@
         </ul>
 
         <div class="pl-2 mt-auto mx-auto flex flex-col gap-2">
-          <%= render ButtonComponent.new(
+          <%= render DS::Button.new(
             variant: "icon",
             icon: "message-circle-question",
             data: { action: "intercom#show" }
@@ -93,7 +93,7 @@
                   <p class="text-sm text-secondary"><%= Current.family.days_left_in_trial %> days remaining</p>
                 </div>
 
-                <%= render LinkComponent.new(
+                <%= render DS::Link.new(
                   text: "Upgrade",
                   href: upgrade_subscription_path,
                 ) %>
diff --git a/app/views/layouts/imports.html.erb b/app/views/layouts/imports.html.erb
index 258cc0a4..09f15cf0 100644
--- a/app/views/layouts/imports.html.erb
+++ b/app/views/layouts/imports.html.erb
@@ -1,7 +1,7 @@
 <%= render "layouts/shared/htmldoc" do %>
   <div class="flex flex-col h-full bg-container">
     <header class="flex items-center justify-between p-8">
-      <%= render LinkComponent.new(
+      <%= render DS::Link.new(
         variant: "icon",
         icon: "arrow-left",
         href: content_for(:previous_path) || imports_path
@@ -11,7 +11,7 @@
         <%= yield :header_nav %>
       </nav>
 
-      <%= render LinkComponent.new(
+      <%= render DS::Link.new(
         variant: "icon",
         icon: "x",
         href: imports_path
diff --git a/app/views/layouts/shared/_confirm_dialog.html.erb b/app/views/layouts/shared/_confirm_dialog.html.erb
index 8e513755..03e92381 100644
--- a/app/views/layouts/shared/_confirm_dialog.html.erb
+++ b/app/views/layouts/shared/_confirm_dialog.html.erb
@@ -1,6 +1,6 @@
 <%# This dialog is used as an override to the browser's confirm API when submitting forms with data-turbo-confirm %>
 <%# See confirm_dialog_controller.js and _htmldoc.html.erb  %>
-<%= render DialogComponent.new(id: "confirm-dialog", auto_open: false, data: { controller: "confirm-dialog" }, width: "sm", disable_frame: true) do |dialog| %>
+<%= render DS::Dialog.new(id: "confirm-dialog", auto_open: false, data: { controller: "confirm-dialog" }, width: "sm", disable_frame: true) do |dialog| %>
   <% dialog.with_body do %>
     <form method="dialog" class="space-y-4">
       <div class="space-y-2">
@@ -14,7 +14,7 @@
 
       <div>
         <% ["primary", "outline-destructive", "destructive"].each do |variant| %>
-          <%= render ButtonComponent.new(
+          <%= render DS::Button.new(
           text: "Confirm",
           variant: variant,
           autofocus: true,
diff --git a/app/views/layouts/wizard.html.erb b/app/views/layouts/wizard.html.erb
index cd775c34..3e82583e 100644
--- a/app/views/layouts/wizard.html.erb
+++ b/app/views/layouts/wizard.html.erb
@@ -4,7 +4,7 @@
       <% if content_for?(:prev_nav) %>
         <%= yield :prev_nav %>
       <% else %>
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
           variant: "icon",
           icon: "arrow-left",
           href: content_for(:previous_path) || root_path
@@ -18,7 +18,7 @@
       <% if content_for?(:cancel_action) %>
         <%= yield :cancel_action %>
       <% else %>
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
           variant: "icon",
           icon: "x",
           href: content_for(:cancel_path) || root_path
diff --git a/app/views/loans/edit.html.erb b/app/views/loans/edit.html.erb
index f9a56f12..19ca2f82 100644
--- a/app/views/loans/edit.html.erb
+++ b/app/views/loans/edit.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".edit", account: @account.name)) %>
   <% dialog.with_body do %>
     <%= render "form", account: @account, url: loan_path(@account) %>
diff --git a/app/views/loans/new.html.erb b/app/views/loans/new.html.erb
index c3784ffd..74d66496 100644
--- a/app/views/loans/new.html.erb
+++ b/app/views/loans/new.html.erb
@@ -5,7 +5,7 @@
              show_eu_link: @show_eu_link,
              accountable_type: "Loan" %>
 <% else %>
-  <%= render DialogComponent.new do |dialog| %>
+  <%= render DS::Dialog.new do |dialog| %>
     <% dialog.with_header(title: t(".title")) %>
     <% dialog.with_body do %>
       <%= render "loans/form", account: @account, url: loans_path %>
diff --git a/app/views/loans/tabs/_overview.html.erb b/app/views/loans/tabs/_overview.html.erb
index e1649583..41167e6f 100644
--- a/app/views/loans/tabs/_overview.html.erb
+++ b/app/views/loans/tabs/_overview.html.erb
@@ -45,7 +45,7 @@
 </div>
 
 <div class="flex justify-center py-8">
-  <%= render LinkComponent.new(
+  <%= render DS::Link.new(
     text: "Edit loan details",
     variant: "ghost",
     href: edit_loan_path(account),
diff --git a/app/views/mfa/backup_codes.html.erb b/app/views/mfa/backup_codes.html.erb
index 6292d9be..4c095979 100644
--- a/app/views/mfa/backup_codes.html.erb
+++ b/app/views/mfa/backup_codes.html.erb
@@ -19,7 +19,7 @@
         <% end %>
       </div>
 
-      <%= render LinkComponent.new(
+      <%= render DS::Link.new(
         text: t(".continue"),
         href: settings_security_path,
         variant: "primary",
diff --git a/app/views/onboardings/_logout.html.erb b/app/views/onboardings/_logout.html.erb
index 20f43408..09d631c0 100644
--- a/app/views/onboardings/_logout.html.erb
+++ b/app/views/onboardings/_logout.html.erb
@@ -1,4 +1,4 @@
- <%= render ButtonComponent.new(
+ <%= render DS::Button.new(
         text: "Sign out",
         icon: "log-out",
         icon_position: :right,
diff --git a/app/views/onboardings/goals.html.erb b/app/views/onboardings/goals.html.erb
index 9ea04b07..93c34818 100644
--- a/app/views/onboardings/goals.html.erb
+++ b/app/views/onboardings/goals.html.erb
@@ -44,7 +44,7 @@
       </div>
 
       <div class="mt-6">
-        <%= render ButtonComponent.new(
+        <%= render DS::Button.new(
           text: "Next",
           full_width: true
         ) %>
diff --git a/app/views/onboardings/trial.html.erb b/app/views/onboardings/trial.html.erb
index 9aa9e6a7..a3566c26 100644
--- a/app/views/onboardings/trial.html.erb
+++ b/app/views/onboardings/trial.html.erb
@@ -30,20 +30,20 @@
 
     <div class="w-full">
       <% if Current.family.can_start_trial? %>
-        <%= render ButtonComponent.new(
+        <%= render DS::Button.new(
         text: "Try Maybe for 14 days",
         href: subscription_path,
         full_width: true,
         data: { turbo: false }
       ) %>
       <% elsif Current.family.trialing? %>
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
           text: "Continue trial",
           href: root_path,
           full_width: true,
         ) %>
       <% else %>
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
           text: "Upgrade",
           href: upgrade_subscription_path,
           full_width: true,
@@ -57,9 +57,9 @@
 
     <div class="flex gap-3">
       <div class="rounded-xl p-1 bg-gray-400/20 theme-dark:bg-gray-500/20 flex flex-col justify-between items-center text-secondary">
-        <%= render FilledIconComponent.new(icon: "unlock-keyhole", variant: :inverse) %>
-        <%= render FilledIconComponent.new(icon: "bell", variant: :inverse) %>
-        <%= render FilledIconComponent.new(icon: "credit-card", variant: :inverse) %>
+        <%= render DS::FilledIcon.new(icon: "unlock-keyhole", variant: :inverse) %>
+        <%= render DS::FilledIcon.new(icon: "bell", variant: :inverse) %>
+        <%= render DS::FilledIcon.new(icon: "credit-card", variant: :inverse) %>
       </div>
 
       <div class="space-y-12">
@@ -86,22 +86,22 @@
 
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-x-12 gap-y-6 text-secondary">
       <div class="flex flex-col gap-4 items-center">
-        <%= render FilledIconComponent.new(icon: "landmark", variant: :surface) %>
+        <%= render DS::FilledIcon.new(icon: "landmark", variant: :surface) %>
         <p class="text-sm text-primary text-center">More than 10,000 institutions to connect to</p>
       </div>
 
       <div class="flex flex-col gap-4 items-center">
-        <%= render FilledIconComponent.new(icon: "layers", variant: :surface) %>
+        <%= render DS::FilledIcon.new(icon: "layers", variant: :surface) %>
         <p class="text-sm text-primary text-center">Connect unlimited accounts and account types</p>
       </div>
 
       <div class="flex flex-col gap-4 items-center">
-        <%= render FilledIconComponent.new(icon: "line-chart", variant: :surface) %>
+        <%= render DS::FilledIcon.new(icon: "line-chart", variant: :surface) %>
         <p class="text-sm text-primary text-center">Performance and investment returns across portfolio</p>
       </div>
 
       <div class="flex flex-col gap-4 items-center">
-        <%= render FilledIconComponent.new(icon: "credit-card", variant: :surface) %>
+        <%= render DS::FilledIcon.new(icon: "credit-card", variant: :surface) %>
         <p class="text-sm text-primary text-center">Comprehensive transaction tracking experience</p>
       </div>
 
@@ -111,22 +111,22 @@
       </div>
 
       <div class="flex flex-col gap-4 items-center">
-        <%= render FilledIconComponent.new(icon: "keyboard", variant: :surface) %>
+        <%= render DS::FilledIcon.new(icon: "keyboard", variant: :surface) %>
         <p class="text-sm text-primary text-center">Manual account tracking that works well</p>
       </div>
 
       <div class="flex flex-col gap-4 items-center">
-        <%= render FilledIconComponent.new(icon: "globe-2", variant: :surface) %>
+        <%= render DS::FilledIcon.new(icon: "globe-2", variant: :surface) %>
         <p class="text-sm text-primary text-center">Multiple currencies and near global coverage</p>
       </div>
 
       <div class="flex flex-col gap-4 items-center">
-        <%= render FilledIconComponent.new(icon: "ship", variant: :surface) %>
+        <%= render DS::FilledIcon.new(icon: "ship", variant: :surface) %>
         <p class="text-sm text-primary text-center">Early access to newly released features</p>
       </div>
 
       <div class="flex flex-col gap-4 items-center">
-        <%= render FilledIconComponent.new(icon: "messages-square", variant: :surface) %>
+        <%= render DS::FilledIcon.new(icon: "messages-square", variant: :surface) %>
         <p class="text-sm text-primary text-center">Priority human support from team</p>
       </div>
     </div>
diff --git a/app/views/other_assets/edit.html.erb b/app/views/other_assets/edit.html.erb
index 271982fc..930ce27a 100644
--- a/app/views/other_assets/edit.html.erb
+++ b/app/views/other_assets/edit.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".edit", account: @account.name)) %>
   <% dialog.with_body do %>
     <%= render "form", account: @account, url: other_asset_path(@account) %>
diff --git a/app/views/other_assets/new.html.erb b/app/views/other_assets/new.html.erb
index 106b2994..75737ada 100644
--- a/app/views/other_assets/new.html.erb
+++ b/app/views/other_assets/new.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".title")) %>
   <% dialog.with_body do %>
     <%= render "form", account: @account, url: other_assets_path %>
diff --git a/app/views/other_liabilities/edit.html.erb b/app/views/other_liabilities/edit.html.erb
index 8cc6c1be..57d8b2b4 100644
--- a/app/views/other_liabilities/edit.html.erb
+++ b/app/views/other_liabilities/edit.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".edit", account: @account.name)) %>
   <% dialog.with_body do %>
     <%= render "form", account: @account, url: other_liability_path(@account) %>
diff --git a/app/views/other_liabilities/new.html.erb b/app/views/other_liabilities/new.html.erb
index f8a1ab46..b32439b2 100644
--- a/app/views/other_liabilities/new.html.erb
+++ b/app/views/other_liabilities/new.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".title")) %>
   <% dialog.with_body do %>
     <%= render "form", account: @account, url: other_liabilities_path %>
diff --git a/app/views/pages/dashboard.html.erb b/app/views/pages/dashboard.html.erb
index 82de3bd1..2444f6cf 100644
--- a/app/views/pages/dashboard.html.erb
+++ b/app/views/pages/dashboard.html.erb
@@ -5,7 +5,7 @@
       <p class="text-sm lg:text-base text-secondary">Here's what's happening with your finances</p>
     </div>
 
-    <%= render LinkComponent.new(
+    <%= render DS::Link.new(
       icon: "plus",
       text: "New",
       href: new_account_path,
@@ -13,7 +13,7 @@
       class: "hidden lg:inline-flex"
     ) %>
 
-    <%= render LinkComponent.new(
+    <%= render DS::Link.new(
         variant: "icon-inverse",
         icon: "plus",
         href: new_account_path,
diff --git a/app/views/pages/dashboard/_balance_sheet.html.erb b/app/views/pages/dashboard/_balance_sheet.html.erb
index 8ad17567..30573324 100644
--- a/app/views/pages/dashboard/_balance_sheet.html.erb
+++ b/app/views/pages/dashboard/_balance_sheet.html.erb
@@ -112,7 +112,7 @@
 
       <% else %>
         <div class="py-10 flex flex-col items-center">
-          <%= render FilledIconComponent.new(
+          <%= render DS::FilledIcon.new(
             variant: :container,
             icon: classification_group.icon,
           ) %>
diff --git a/app/views/pages/dashboard/_cashflow_sankey.html.erb b/app/views/pages/dashboard/_cashflow_sankey.html.erb
index 96a40636..ec03f841 100644
--- a/app/views/pages/dashboard/_cashflow_sankey.html.erb
+++ b/app/views/pages/dashboard/_cashflow_sankey.html.erb
@@ -25,14 +25,14 @@
   <% else %>
     <div class="h-[300px] lg:h-[340px] bg-container py-4 flex flex-col items-center justify-center">
       <div class="space-y-3 text-center flex flex-col items-center">
-        <%= render FilledIconComponent.new(
+        <%= render DS::FilledIcon.new(
           variant: :container,
           icon: "activity" # cashflow placeholder icon
         ) %>
 
         <p class="text-sm font-medium text-primary">No cash flow data for this time period</p>
         <p class="text-secondary text-sm">Add transactions to display cash flow data or expand the time period</p>
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
           text: "Add transaction",
           icon: "plus",
           href: new_transaction_path,
diff --git a/app/views/pages/dashboard/_no_accounts_graph_placeholder.html.erb b/app/views/pages/dashboard/_no_accounts_graph_placeholder.html.erb
index 836a5d69..5b0909c1 100644
--- a/app/views/pages/dashboard/_no_accounts_graph_placeholder.html.erb
+++ b/app/views/pages/dashboard/_no_accounts_graph_placeholder.html.erb
@@ -1,13 +1,13 @@
 <div class="h-[300px] lg:h-[340px] bg-container shadow-border-xs rounded-xl py-4 flex flex-col items-center justify-center">
   <div class="space-y-3 text-center flex flex-col items-center">
-    <%= render FilledIconComponent.new(
+    <%= render DS::FilledIcon.new(
       variant: :container,
       icon: "layers",
     ) %>
 
     <p class="text-sm font-medium text-primary">No accounts yet</p>
     <p class="text-secondary text-sm">Add accounts to display net worth data</p>
-    <%= render LinkComponent.new(
+    <%= render DS::Link.new(
       text: "Add account",
       icon: "plus",
       href: new_account_path,
diff --git a/app/views/pages/redis_configuration_error.html.erb b/app/views/pages/redis_configuration_error.html.erb
index 303ce4a7..bf165ccb 100644
--- a/app/views/pages/redis_configuration_error.html.erb
+++ b/app/views/pages/redis_configuration_error.html.erb
@@ -26,7 +26,7 @@
 
         <!-- Primary CTA -->
         <div class="text-center space-y-4">
-          <%= render LinkComponent.new(
+          <%= render DS::Link.new(
             text: "View Setup Guide",
             href: "https://github.com/maybe-finance/maybe/blob/main/docs/hosting/docker.md",
             variant: "primary",
@@ -44,7 +44,7 @@
       <div class="pt-6 border-t border-primary">
         <div class="text-center space-y-3">
           <p class="text-sm text-muted">Once you've configured Redis, refresh this page to continue.</p>
-          <%= render ButtonComponent.new(
+          <%= render DS::Button.new(
             text: "Refresh Page",
             variant: "secondary",
             icon: "refresh-cw",
diff --git a/app/views/plaid_items/_plaid_item.html.erb b/app/views/plaid_items/_plaid_item.html.erb
index 6ddb550c..9a7397a7 100644
--- a/app/views/plaid_items/_plaid_item.html.erb
+++ b/app/views/plaid_items/_plaid_item.html.erb
@@ -48,7 +48,7 @@
 
       <div class="flex items-center gap-2">
         <% if plaid_item.requires_update? %>
-          <%= render LinkComponent.new(
+          <%= render DS::Link.new(
             text: t(".update"),
             icon: "refresh-cw",
             variant: "secondary",
@@ -63,7 +63,7 @@
           ) %>
         <% end %>
 
-        <%= render MenuComponent.new do |menu| %>
+        <%= render DS::Menu.new do |menu| %>
           <% menu.with_item(
             variant: "button",
             text: t(".delete"),
diff --git a/app/views/properties/_form_alert.html.erb b/app/views/properties/_form_alert.html.erb
index 934fa374..948e0c88 100644
--- a/app/views/properties/_form_alert.html.erb
+++ b/app/views/properties/_form_alert.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (notice: nil, error: nil) %>
 
 <% if notice.present? %>
-  <%= render AlertComponent.new(message: notice, variant: :success) %>
+  <%= render DS::Alert.new(message: notice, variant: :success) %>
 <% elsif error.present? %>
-  <%= render AlertComponent.new(message: error, variant: :error) %>
+  <%= render DS::Alert.new(message: error, variant: :error) %>
 <% end %>
diff --git a/app/views/properties/address.html.erb b/app/views/properties/address.html.erb
index 765fc48a..834f7c95 100644
--- a/app/views/properties/address.html.erb
+++ b/app/views/properties/address.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: "Enter property manually") %>
   <% dialog.with_body do %>
     <div class="flex gap-4">
@@ -38,7 +38,7 @@
 
           <!-- Save button -->
           <div class="flex justify-end mt-4">
-            <%= render ButtonComponent.new(
+            <%= render DS::Button.new(
               text: "Save",
               variant: "primary",
             ) %>
diff --git a/app/views/properties/balances.html.erb b/app/views/properties/balances.html.erb
index c9141771..a25f7793 100644
--- a/app/views/properties/balances.html.erb
+++ b/app/views/properties/balances.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: "Enter property manually") %>
   <% dialog.with_body do %>
     <div class="flex gap-4">
@@ -18,7 +18,7 @@
 
           <!-- Next button -->
           <div class="flex justify-end mt-4">
-            <%= render ButtonComponent.new(
+            <%= render DS::Button.new(
               text: @account.active? ? "Save" : "Next",
               variant: "primary",
             ) %>
diff --git a/app/views/properties/edit.html.erb b/app/views/properties/edit.html.erb
index fd75d929..51d674f9 100644
--- a/app/views/properties/edit.html.erb
+++ b/app/views/properties/edit.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: "Enter property manually") %>
   <% dialog.with_body do %>
     <div class="flex gap-4">
@@ -15,7 +15,7 @@
 
           <!-- Save button -->
           <div class="flex justify-end mt-4">
-            <%= render ButtonComponent.new(
+            <%= render DS::Button.new(
               text: @account.active? ? "Save" : "Next",
               variant: "primary",
             ) %>
diff --git a/app/views/properties/new.html.erb b/app/views/properties/new.html.erb
index 73dae294..03feb04a 100644
--- a/app/views/properties/new.html.erb
+++ b/app/views/properties/new.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: "Enter property manually") %>
   <% dialog.with_body do %>
     <div class="flex gap-4">
@@ -15,7 +15,7 @@
 
           <!-- Create button -->
           <div class="flex justify-end mt-4">
-            <%= render ButtonComponent.new(
+            <%= render DS::Button.new(
               text: "Next",
               variant: "primary",
             ) %>
diff --git a/app/views/properties/tabs/_overview.html.erb b/app/views/properties/tabs/_overview.html.erb
index 3916fb05..3a33e092 100644
--- a/app/views/properties/tabs/_overview.html.erb
+++ b/app/views/properties/tabs/_overview.html.erb
@@ -29,7 +29,7 @@
 </div>
 
 <div class="flex justify-center py-8">
-  <%= render LinkComponent.new(
+  <%= render DS::Link.new(
     text: "Edit account details",
     href: edit_property_path(account),
     variant: "ghost",
diff --git a/app/views/rule/conditions/_condition_group.html.erb b/app/views/rule/conditions/_condition_group.html.erb
index 77383833..54f056ba 100644
--- a/app/views/rule/conditions/_condition_group.html.erb
+++ b/app/views/rule/conditions/_condition_group.html.erb
@@ -39,7 +39,7 @@
     <% end %>
   </ul>
 
-  <%= render ButtonComponent.new(
+  <%= render DS::Button.new(
     text: "Add condition",
     leading_icon: "plus",
     variant: "ghost",
diff --git a/app/views/rules/_category_rule_cta.html.erb b/app/views/rules/_category_rule_cta.html.erb
index 66996044..fb601b2d 100644
--- a/app/views/rules/_category_rule_cta.html.erb
+++ b/app/views/rules/_category_rule_cta.html.erb
@@ -13,9 +13,9 @@
     <%= f.hidden_field :rule_prompt_dismissed_at, value: Time.current %>
 
     <%= tag.div class:"flex gap-2 justify-end" do %>
-      <%= render ButtonComponent.new(text: "Dismiss", variant: "secondary") %>
+      <%= render DS::Button.new(text: "Dismiss", variant: "secondary") %>
       <% rule_href = new_rule_path(resource_type: "transaction", action_type: "set_transaction_category", action_value: cta[:category_id]) %>
-      <%= render LinkComponent.new(text: "Create rule", variant: "primary", href: rule_href, frame: :modal) %>
+      <%= render DS::Link.new(text: "Create rule", variant: "primary", href: rule_href, frame: :modal) %>
     <% end %>
   <% end %>
 <% end %>
diff --git a/app/views/rules/_form.html.erb b/app/views/rules/_form.html.erb
index 387423f2..d15ad471 100644
--- a/app/views/rules/_form.html.erb
+++ b/app/views/rules/_form.html.erb
@@ -50,8 +50,8 @@
       </ul>
 
     <div class="flex items-center gap-2">
-      <%= render ButtonComponent.new(text: "Add condition", icon: "plus", variant: "ghost", type: "button", data: { action: "rules#addCondition" }) %>
-      <%= render ButtonComponent.new(text: "Add condition group", icon: "copy-plus", variant: "ghost", type: "button", data: { action: "rules#addConditionGroup" }) %>
+      <%= render DS::Button.new(text: "Add condition", icon: "plus", variant: "ghost", type: "button", data: { action: "rules#addCondition" }) %>
+      <%= render DS::Button.new(text: "Add condition group", icon: "copy-plus", variant: "ghost", type: "button", data: { action: "rules#addConditionGroup" }) %>
     </div>
   </section>
 
@@ -74,7 +74,7 @@
         <% end %>
       </ul>
 
-    <%= render ButtonComponent.new(text: "Add action", icon: "plus", variant: "ghost", type: "button", data: { action: "rules#addAction" }) %>
+    <%= render DS::Button.new(text: "Add action", icon: "plus", variant: "ghost", type: "button", data: { action: "rules#addAction" }) %>
   </section>
 
   <section class="space-y-4">
diff --git a/app/views/rules/_rule.html.erb b/app/views/rules/_rule.html.erb
index 3157a904..e562cb95 100644
--- a/app/views/rules/_rule.html.erb
+++ b/app/views/rules/_rule.html.erb
@@ -60,7 +60,7 @@
     <%= styled_form_with model: rule, data: { controller: "auto-submit-form" } do |f| %>
       <%= f.toggle :active, { data: { auto_submit_form_target: "auto" } } %>
     <% end %>
-    <%= render MenuComponent.new do |menu| %>
+    <%= render DS::Menu.new do |menu| %>
       <% menu.with_item(variant: "link", text: "Edit", href: edit_rule_path(rule), icon: "pencil", data: { turbo_frame: "modal" }) %>
       <% menu.with_item(variant: "link", text: "Re-apply rule", href: confirm_rule_path(rule), icon: "refresh-cw", data: { turbo_frame: "modal" }) %>
       <% menu.with_item(
diff --git a/app/views/rules/confirm.html.erb b/app/views/rules/confirm.html.erb
index 03311791..5307eaaf 100644
--- a/app/views/rules/confirm.html.erb
+++ b/app/views/rules/confirm.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new(reload_on_close: true) do |dialog| %>
+<%= render DS::Dialog.new(reload_on_close: true) do |dialog| %>
   <%
     title = if @rule.name.present?
               "Confirm changes to \"#{@rule.name}\""
@@ -15,7 +15,7 @@
       that meet the specified rule criteria.  Please confirm if you wish to proceed with this change.
     </p>
 
-    <%= render ButtonComponent.new(
+    <%= render DS::Button.new(
       text: "Confirm changes",
       href: apply_rule_path(@rule),
       method: :post,
diff --git a/app/views/rules/edit.html.erb b/app/views/rules/edit.html.erb
index 91dea816..b3c4bffa 100644
--- a/app/views/rules/edit.html.erb
+++ b/app/views/rules/edit.html.erb
@@ -1,6 +1,6 @@
 <%= link_to "Back to rules", rules_path %>
 
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <%
     title = if @rule.name.present?
               "Edit #{@rule.resource_type} rule \"#{@rule.name}\""
diff --git a/app/views/rules/index.html.erb b/app/views/rules/index.html.erb
index dc6e97aa..49062f69 100644
--- a/app/views/rules/index.html.erb
+++ b/app/views/rules/index.html.erb
@@ -2,7 +2,7 @@
   <h1 class="text-primary text-xl font-medium">Rules</h1>
   <div class="flex items-center gap-2">
     <% if @rules.any? %>
-      <%= render MenuComponent.new do |menu| %>
+      <%= render DS::Menu.new do |menu| %>
         <% menu.with_item(
           variant: "button",
           text: "Delete all rules",
@@ -12,7 +12,7 @@
           confirm: CustomConfirm.for_resource_deletion("all rules", high_severity: true)) %>
       <% end %>
     <% end %>
-    <%= render LinkComponent.new(
+    <%= render DS::Link.new(
       text: "New rule",
       variant: "primary",
       href: new_rule_path(resource_type: "transaction"),
@@ -48,7 +48,7 @@
                       data: { auto_submit_form_target: "auto", autosubmit_trigger_event: "change" } %>
             <%= form.hidden_field :direction, value: @direction %>
           <% end %>
-          <%= render LinkComponent.new(
+          <%= render DS::Link.new(
             href: rules_path(direction: @direction == "asc" ? "desc" : "asc", sort_by: @sort_by),
             variant: "icon",
             icon: "arrow-up-down",
@@ -69,7 +69,7 @@
         <p class="text-sm text-primary font-medium mb-1">No rules yet</p>
         <p class="text-sm text-secondary mb-4">Set up rules to perform actions to your transactions and other data on every account sync.</p>
         <div class="flex items-center gap-2">
-          <%= render LinkComponent.new(
+          <%= render DS::Link.new(
             text: "New rule",
             variant: "primary",
             href: new_rule_path(resource_type: "transaction"),
diff --git a/app/views/rules/new.html.erb b/app/views/rules/new.html.erb
index a39a299b..859a9b27 100644
--- a/app/views/rules/new.html.erb
+++ b/app/views/rules/new.html.erb
@@ -1,6 +1,6 @@
 <%= link_to "Back to rules", rules_path %>
 
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: "New #{@rule.resource_type} rule") %>
   <% dialog.with_body do %>
     <%= render "rules/form", rule: @rule %>
diff --git a/app/views/settings/_settings_nav.html.erb b/app/views/settings/_settings_nav.html.erb
index 931b2df1..bd488774 100644
--- a/app/views/settings/_settings_nav.html.erb
+++ b/app/views/settings/_settings_nav.html.erb
@@ -34,7 +34,7 @@ nav_sections = [
 
 <div class="space-y-4">
   <div class="hidden lg:flex items-center gap-2 p-1.5">
-    <%= render LinkComponent.new(
+    <%= render DS::Link.new(
       text: "Back",
       icon: "chevron-left",
       href: previous_path,
@@ -71,7 +71,7 @@ nav_sections = [
   <nav class="space-y-4 overflow-y-auto md:hidden" id="mobile-settings-nav" data-controller="preserve-scroll scroll-on-connect">
     <ul class="flex space-y-1">
       <li>
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
           text: "Back",
           icon: "chevron-left",
           href: previous_path,
diff --git a/app/views/settings/api_keys/created.html.erb b/app/views/settings/api_keys/created.html.erb
index 115e9826..5e7eb833 100644
--- a/app/views/settings/api_keys/created.html.erb
+++ b/app/views/settings/api_keys/created.html.erb
@@ -4,7 +4,7 @@
   <div class="space-y-4">
     <div class="p-3 shadow-border-xs bg-container rounded-lg">
       <div class="flex items-start gap-3">
-        <%= render FilledIconComponent.new(
+        <%= render DS::FilledIcon.new(
           icon: "check-circle",
           rounded: true,
           size: "lg",
@@ -24,7 +24,7 @@
       <div class="bg-container rounded-lg p-3 border border-primary" data-controller="clipboard">
         <div class="flex items-center justify-between gap-3">
           <code id="api-key-display" class="font-mono text-sm text-primary break-all" data-clipboard-target="source"><%= @api_key.plain_key %></code>
-          <%= render ButtonComponent.new(
+          <%= render DS::Button.new(
             text: "Copy API Key",
             variant: "ghost",
             icon: "copy",
@@ -84,7 +84,7 @@
     </div>
 
     <div class="flex justify-end pt-4 border-t border-primary">
-      <%= render LinkComponent.new(
+      <%= render DS::Link.new(
         text: "Continue to API Key Settings",
         href: settings_api_key_path,
         variant: "primary"
diff --git a/app/views/settings/api_keys/created.turbo_stream.erb b/app/views/settings/api_keys/created.turbo_stream.erb
index b9651cdc..89dab090 100644
--- a/app/views/settings/api_keys/created.turbo_stream.erb
+++ b/app/views/settings/api_keys/created.turbo_stream.erb
@@ -9,7 +9,7 @@
         <div class="space-y-4">
           <div class="p-3 shadow-border-xs bg-container rounded-lg">
             <div class="flex items-start gap-3">
-              <%= render FilledIconComponent.new(
+              <%= render DS::FilledIcon.new(
                 icon: "check-circle",
                 rounded: true,
                 size: "lg",
@@ -29,7 +29,7 @@
             <div class="bg-container rounded-lg p-3 border border-primary" data-controller="clipboard">
               <div class="flex items-center justify-between gap-3">
                 <code id="api-key-display" class="font-mono text-sm text-primary break-all" data-clipboard-target="source"><%= @api_key.plain_key %></code>
-                <%= render ButtonComponent.new(
+                <%= render DS::Button.new(
                   text: "Copy API Key",
                   variant: "ghost",
                   icon: "copy",
@@ -89,7 +89,7 @@
           </div>
 
           <div class="flex justify-end pt-4 border-t border-primary">
-            <%= render LinkComponent.new(
+            <%= render DS::Link.new(
               text: "Continue to API Key Settings",
               href: settings_api_key_path,
               variant: "primary"
diff --git a/app/views/settings/api_keys/new.html.erb b/app/views/settings/api_keys/new.html.erb
index 5c309721..d4e2ddc7 100644
--- a/app/views/settings/api_keys/new.html.erb
+++ b/app/views/settings/api_keys/new.html.erb
@@ -44,13 +44,13 @@
     </div>
 
     <div class="flex justify-end gap-3 pt-4 border-t border-primary">
-      <%= render LinkComponent.new(
+      <%= render DS::Link.new(
         text: "Cancel",
         href: settings_api_key_path,
         variant: "ghost"
       ) %>
 
-      <%= render ButtonComponent.new(
+      <%= render DS::Button.new(
         text: "Create API Key",
         variant: "primary",
         type: "submit"
diff --git a/app/views/settings/api_keys/show.html.erb b/app/views/settings/api_keys/show.html.erb
index 27786452..e1c82904 100644
--- a/app/views/settings/api_keys/show.html.erb
+++ b/app/views/settings/api_keys/show.html.erb
@@ -5,7 +5,7 @@
     <div class="space-y-4">
       <div class="p-3 shadow-border-xs bg-container rounded-lg">
         <div class="flex items-start gap-3">
-          <%= render FilledIconComponent.new(
+          <%= render DS::FilledIcon.new(
             icon: "check-circle",
             rounded: true,
             size: "lg",
@@ -25,7 +25,7 @@
         <div class="bg-container rounded-lg p-3 border border-primary" data-controller="clipboard">
           <div class="flex items-center justify-between gap-3">
             <code id="api-key-display" class="font-mono text-sm text-primary break-all" data-clipboard-target="source"><%= @current_api_key.plain_key %></code>
-            <%= render ButtonComponent.new(
+            <%= render DS::Button.new(
               text: "Copy API Key",
               variant: "ghost",
               icon: "copy",
@@ -44,7 +44,7 @@
       </div>
 
       <div class="flex justify-end pt-4 border-t border-primary">
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
           text: "Continue to API Key Settings",
           href: settings_api_key_path,
           variant: "primary"
@@ -57,7 +57,7 @@
     <div class="space-y-4">
       <div class="p-3 shadow-border-xs bg-container rounded-lg flex justify-between items-center">
         <div class="flex items-center gap-3">
-          <%= render FilledIconComponent.new(
+          <%= render DS::FilledIcon.new(
             icon: "key",
             rounded: true,
             size: "lg"
@@ -104,7 +104,7 @@
         <div class="bg-container rounded-lg p-3 border border-primary" data-controller="clipboard">
           <div class="flex items-center justify-between gap-3">
             <code id="api-key-display" class="font-mono text-sm text-primary break-all" data-clipboard-target="source"><%= @current_api_key.plain_key %></code>
-            <%= render ButtonComponent.new(
+            <%= render DS::Button.new(
               text: "Copy API Key",
               variant: "ghost",
               icon: "copy",
@@ -123,13 +123,13 @@
       </div>
 
       <div class="flex flex-col sm:flex-row gap-3 pt-4 border-t border-primary">
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
           text: "Create New Key",
           href: new_settings_api_key_path(regenerate: true),
           variant: "secondary"
         ) %>
 
-        <%= render ButtonComponent.new(
+        <%= render DS::Button.new(
           text: "Revoke Key",
           href: settings_api_key_path,
           method: :delete,
@@ -146,7 +146,7 @@
     <div class="space-y-4">
       <div class="p-3 shadow-border-xs bg-container rounded-lg">
         <div class="flex items-start gap-3">
-          <%= render FilledIconComponent.new(
+          <%= render DS::FilledIcon.new(
             icon: "key",
             rounded: true,
             size: "lg"
@@ -181,7 +181,7 @@
       </div>
 
       <div class="flex justify-start">
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
           text: "Create API Key",
           href: new_settings_api_key_path,
           variant: "primary"
diff --git a/app/views/settings/billings/show.html.erb b/app/views/settings/billings/show.html.erb
index f94189be..9c96b18f 100644
--- a/app/views/settings/billings/show.html.erb
+++ b/app/views/settings/billings/show.html.erb
@@ -4,7 +4,7 @@
   <div class="space-y-4">
     <div class="p-3 shadow-border-xs bg-container rounded-lg flex justify-between items-center">
       <div class="flex items-center gap-3">
-        <%= render FilledIconComponent.new(
+        <%= render DS::FilledIcon.new(
           icon: "gem",
           rounded: true,
           size: "lg"
@@ -34,7 +34,7 @@
       </div>
 
       <% if @family.has_active_subscription? %>
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
           text: "Manage",
           icon: "external-link",
           variant: "primary",
@@ -43,7 +43,7 @@
           rel: "noopener"
         ) %>
       <% else %>
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
           text: "Choose plan",
           variant: "primary",
           icon: "plus",
diff --git a/app/views/settings/profiles/show.html.erb b/app/views/settings/profiles/show.html.erb
index ceb6a36c..e1f0d653 100644
--- a/app/views/settings/profiles/show.html.erb
+++ b/app/views/settings/profiles/show.html.erb
@@ -19,7 +19,7 @@
       </div>
 
       <div class="flex justify-end mt-4">
-        <%= render ButtonComponent.new(text: t(".save"), class: "md:w-auto w-full justify-center") %>
+        <%= render DS::Button.new(text: t(".save"), class: "md:w-auto w-full justify-center") %>
       </div>
     </div>
   <% end %>
@@ -51,7 +51,7 @@
           </div>
           <% if Current.user.admin? && user != Current.user %>
             <div class="ml-auto">
-              <%= render ButtonComponent.new(
+              <%= render DS::Button.new(
                 variant: "icon",
                 icon: "x",
                 href: settings_profile_path(user_id: user),
@@ -98,7 +98,7 @@
               <% end %>
 
               <% if Current.user.admin? %>
-                <%= render ButtonComponent.new(
+                <%= render DS::Button.new(
                   variant: "icon",
                   icon: "x",
                   href: invitation_path(invitation),
@@ -131,7 +131,7 @@
           <p class="text-secondary text-sm"><%= t(".reset_account_warning") %></p>
         </div>
 
-        <%= render ButtonComponent.new(
+        <%= render DS::Button.new(
           text: t(".reset_account"),
           variant: "destructive",
           href: reset_user_path(@user),
@@ -152,7 +152,7 @@
         <p class="text-secondary text-sm"><%= t(".delete_account_warning") %></p>
       </div>
 
-      <%= render ButtonComponent.new(
+      <%= render DS::Button.new(
         text: t(".delete_account"),
         variant: "destructive",
         href: user_path(@user),
diff --git a/app/views/settings/securities/show.html.erb b/app/views/settings/securities/show.html.erb
index 1ac38d73..1d3a7350 100644
--- a/app/views/settings/securities/show.html.erb
+++ b/app/views/settings/securities/show.html.erb
@@ -21,7 +21,7 @@
 
       <div class="mt-4 md:mt-0">
         <% if Current.user.otp_required? %>
-          <%= render ButtonComponent.new(
+          <%= render DS::Button.new(
             text: t(".disable_mfa"),
             variant: "secondary",
             href: disable_mfa_path,
@@ -34,7 +34,7 @@
             )
           ) %>
         <% else %>
-          <%= render LinkComponent.new(
+          <%= render DS::Link.new(
             text: t(".enable_mfa"),
             variant: "primary",
             href: new_mfa_path
diff --git a/app/views/subscriptions/upgrade.html.erb b/app/views/subscriptions/upgrade.html.erb
index ff1babb1..959babf6 100644
--- a/app/views/subscriptions/upgrade.html.erb
+++ b/app/views/subscriptions/upgrade.html.erb
@@ -3,14 +3,14 @@
     <h1 class="sr-only">Upgrade</h1>
 
     <div class="flex justify-end gap-2">
-      <%= render LinkComponent.new(
+      <%= render DS::Link.new(
         text: "Account Settings",
         icon: "settings",
         variant: "ghost",
         href: settings_profile_path,
       ) %>
 
-      <%= render ButtonComponent.new(
+      <%= render DS::Button.new(
         text: "Sign out",
         icon: "log-out",
         icon_position: :right,
@@ -45,7 +45,7 @@
       </div>
 
       <div class="text-center space-y-2">
-        <%= render ButtonComponent.new(
+        <%= render DS::Button.new(
           text: "Subscribe and unlock Maybe",
           variant: "primary",
           full_width: true
diff --git a/app/views/tag/deletions/new.html.erb b/app/views/tag/deletions/new.html.erb
index 57f4d14b..4370d3da 100644
--- a/app/views/tag/deletions/new.html.erb
+++ b/app/views/tag/deletions/new.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".delete_tag"), subtitle: t(".explanation", tag_name: @tag.name)) %>
 
   <% dialog.with_body do %>
@@ -14,14 +14,14 @@
                             { prompt: t(".replacement_tag_prompt"), label: t(".tag"), container_class: "mb-4" },
                             data: { deletion_target: "replacementField", action: "deletion#chooseSubmitButton" } %>
 
-      <%= render ButtonComponent.new(
+      <%= render DS::Button.new(
         variant: "destructive",
         text: t(".delete_and_leave_uncategorized", tag_name: @tag.name),
         full_width: true,
         data: { deletion_target: "destructiveSubmitButton" }
       ) %>
 
-      <%= render ButtonComponent.new(
+      <%= render DS::Button.new(
         text: "Delete and reassign",
         data: { deletion_target: "safeSubmitButton" },
         hidden: true,
diff --git a/app/views/tags/_tag.html.erb b/app/views/tags/_tag.html.erb
index 654e4fdb..aadbc63a 100644
--- a/app/views/tags/_tag.html.erb
+++ b/app/views/tags/_tag.html.erb
@@ -8,7 +8,7 @@
     </p>
   </div>
   <div class="justify-self-end">
-    <%= render MenuComponent.new do |menu| %>
+    <%= render DS::Menu.new do |menu| %>
       <% menu.with_item(variant: "link", text: t(".edit"), href: edit_tag_path(tag), icon: "pencil", data: { turbo_frame: "modal" }) %>
 
       <% if tag.transactions.any? %>
diff --git a/app/views/tags/edit.html.erb b/app/views/tags/edit.html.erb
index 3453189d..7a45c5b7 100644
--- a/app/views/tags/edit.html.erb
+++ b/app/views/tags/edit.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".edit")) %>
   <% dialog.with_body do %>
     <%= render "form", tag: @tag %>
diff --git a/app/views/tags/index.html.erb b/app/views/tags/index.html.erb
index 39b21b1e..8ab32898 100644
--- a/app/views/tags/index.html.erb
+++ b/app/views/tags/index.html.erb
@@ -2,7 +2,7 @@
   <h1 class="text-primary text-xl font-medium"><%= t(".tags") %></h1>
 
 <div class="flex items-center gap-2">
-  <%= render MenuComponent.new do |menu| %>
+  <%= render DS::Menu.new do |menu| %>
     <% menu.with_item(
           variant: "button",
           text: "Delete all",
@@ -12,7 +12,7 @@
           confirm: CustomConfirm.for_resource_deletion("all tags", high_severity: true)) %>
   <% end %>
 
-    <%= render LinkComponent.new(
+    <%= render DS::Link.new(
       text: t(".new"),
       variant: "primary",
       href: new_tag_path,
@@ -44,7 +44,7 @@
       <div class="text-center flex flex-col items-center max-w-[300px]">
         <p class="text-primary mb-1 font-medium text-sm"><%= t(".empty") %></p>
 
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
           text: t(".new"),
           icon: "plus",
           href: new_tag_path,
diff --git a/app/views/tags/new.html.erb b/app/views/tags/new.html.erb
index 19508471..273cc26d 100644
--- a/app/views/tags/new.html.erb
+++ b/app/views/tags/new.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".new")) %>
   <% dialog.with_body do %>
     <%= render "form", tag: @tag %>
diff --git a/app/views/trades/_header.html.erb b/app/views/trades/_header.html.erb
index 5a8515c7..64be85a3 100644
--- a/app/views/trades/_header.html.erb
+++ b/app/views/trades/_header.html.erb
@@ -32,7 +32,7 @@
   <% trade = entry.trade %>
 
   <div class="mb-2">
-    <%= render DisclosureComponent.new(title: t(".overview"), open: true) do %>
+    <%= render DS::Disclosure.new(title: t(".overview"), open: true) do %>
       <div class="pb-4">
         <dl class="space-y-3 px-3 py-2">
           <div class="flex items-center justify-between text-sm">
diff --git a/app/views/trades/_trade.html.erb b/app/views/trades/_trade.html.erb
index 7d940aa6..ddaced9a 100644
--- a/app/views/trades/_trade.html.erb
+++ b/app/views/trades/_trade.html.erb
@@ -12,7 +12,7 @@
 
         <div class="max-w-full">
           <%= tag.div class: ["flex items-center gap-2"] do %>
-            <%= render FilledIconComponent.new(
+            <%= render DS::FilledIcon.new(
               variant: :text,
               text: entry.name,
               size: "sm",
diff --git a/app/views/trades/new.html.erb b/app/views/trades/new.html.erb
index 056db4e6..88cfdc40 100644
--- a/app/views/trades/new.html.erb
+++ b/app/views/trades/new.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".title")) %>
   <% dialog.with_body do %>
     <%= render "trades/form", model: @model, account: @account %>
diff --git a/app/views/trades/show.html.erb b/app/views/trades/show.html.erb
index 26f467ad..c80b379d 100644
--- a/app/views/trades/show.html.erb
+++ b/app/views/trades/show.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new(variant: "drawer") do |dialog| %>
+<%= render DS::Dialog.new(variant: "drawer") do |dialog| %>
   <% dialog.with_header do %>
     <%= render "trades/header", entry: @entry %>
   <% end %>
diff --git a/app/views/transactions/_form.html.erb b/app/views/transactions/_form.html.erb
index 481c3603..46fd4ac1 100644
--- a/app/views/transactions/_form.html.erb
+++ b/app/views/transactions/_form.html.erb
@@ -29,7 +29,7 @@
     <%= f.date_field :date, label: t(".date"), required: true, min: Entry.min_supported_date, max: Date.current, value: Date.current %>
   </section>
 
-  <%= render DisclosureComponent.new(title: t(".details")) do %>
+  <%= render DS::Disclosure.new(title: t(".details")) do %>
     <%= f.fields_for :entryable do |ef| %>
       <%= ef.select :tag_ids,
                     Current.family.tags.alphabetically.pluck(:name, :id),
diff --git a/app/views/transactions/_transaction.html.erb b/app/views/transactions/_transaction.html.erb
index b603e305..e52c8da2 100644
--- a/app/views/transactions/_transaction.html.erb
+++ b/app/views/transactions/_transaction.html.erb
@@ -23,7 +23,7 @@
                   class: "w-6 h-6 rounded-full",
                   loading: "lazy" %>
             <% else %>
-              <%= render FilledIconComponent.new(
+              <%= render DS::FilledIcon.new(
                 variant: :text,
                 text: entry.name,
                 size: "sm",
diff --git a/app/views/transactions/bulk_updates/new.html.erb b/app/views/transactions/bulk_updates/new.html.erb
index 79cbdd38..08c112ab 100644
--- a/app/views/transactions/bulk_updates/new.html.erb
+++ b/app/views/transactions/bulk_updates/new.html.erb
@@ -1,16 +1,16 @@
-<%= render DialogComponent.new(variant: "drawer", frame: "bulk_transaction_edit_drawer") do |dialog| %>
+<%= render DS::Dialog.new(variant: "drawer", frame: "bulk_transaction_edit_drawer") do |dialog| %>
   <% dialog.with_header(title: "Edit transactions", data: { bulk_select_target: "bulkEditDrawerHeader" }) %>
 
   <% dialog.with_body do %>
     <%= styled_form_with url: transactions_bulk_update_path, scope: "bulk_update", class: "h-full flex flex-col justify-between gap-4", data: { turbo_frame: "_top" } do |form| %>
       <div class="space-y-4">
-        <%= render DisclosureComponent.new(title: "Overview", open: true) do %>
+        <%= render DS::Disclosure.new(title: "Overview", open: true) do %>
           <div class="pb-6 space-y-2">
             <%= form.date_field :date, label: "Date", max: Date.current %>
           </div>
         <% end %>
 
-        <%= render DisclosureComponent.new(title: "Transactions", open: true) do %>
+        <%= render DS::Disclosure.new(title: "Transactions", open: true) do %>
           <div class="space-y-2">
             <%= form.collection_select :category_id, Current.family.categories.alphabetically, :id, :name, { prompt: "Select a category", label: "Category", class: "text-subdued" } %>
             <%= form.collection_select :merchant_id, Current.family.merchants.alphabetically, :id, :name, { prompt: "Select a merchant", label: "Merchant", class: "text-subdued" } %>
@@ -21,8 +21,8 @@
       </div>
 
       <div class="flex justify-end gap-2 mt-auto">
-        <%= render ButtonComponent.new(text: "Cancel", variant: "ghost", data: { action: "click->dialog#close" }) %>
-        <%= render ButtonComponent.new(text: "Save", data: { bulk_select_scope_param: "bulk_update", action: "bulk-select#submitBulkRequest" }) %>
+        <%= render DS::Button.new(text: "Cancel", variant: "ghost", data: { action: "click->dialog#close" }) %>
+        <%= render DS::Button.new(text: "Save", data: { bulk_select_scope_param: "bulk_update", action: "bulk-select#submitBulkRequest" }) %>
       </div>
     <% end %>
   <% end %>
diff --git a/app/views/transactions/index.html.erb b/app/views/transactions/index.html.erb
index 4e9bcf82..8fa5860c 100644
--- a/app/views/transactions/index.html.erb
+++ b/app/views/transactions/index.html.erb
@@ -3,7 +3,7 @@
     <h1 class="text-xl">Transactions</h1>
     <div class="flex items-center gap-5">
       <div class="flex items-center gap-2">
-        <%= render MenuComponent.new do |menu| %>
+        <%= render DS::Menu.new do |menu| %>
           <% menu.with_item(variant: "link", text: "New rule", href: new_rule_path(resource_type: "transaction"), icon: "plus", data: { turbo_frame: :modal }) %>
           <% menu.with_item(variant: "link", text: "Edit rules", href: rules_path, icon: "git-branch", data: { turbo_frame: :_top }) %>
           <% menu.with_item(variant: "link", text: "Edit categories", href: categories_path, icon: "shapes", data: { turbo_frame: :_top }) %>
@@ -14,7 +14,7 @@
         <% end %>
 
         <div class="hidden md:flex">
-          <%= render LinkComponent.new(
+          <%= render DS::Link.new(
             text: t(".import"),
             icon: "download",
             variant: "outline",
@@ -23,7 +23,7 @@
           ) %>
         </div>
 
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
             text: "New transaction",
             icon: "plus",
             variant: "primary",
@@ -32,7 +32,7 @@
             class: "hidden md:inline-flex"
           ) %>
 
-        <%= render LinkComponent.new(
+        <%= render DS::Link.new(
             icon: "plus",
             variant: "icon-inverse",
             href: new_transaction_path,
diff --git a/app/views/transactions/new.html.erb b/app/views/transactions/new.html.erb
index c9183822..ea9d2730 100644
--- a/app/views/transactions/new.html.erb
+++ b/app/views/transactions/new.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: "New transaction") %>
   <% dialog.with_body do %>
     <%= render "form", entry: @entry, income_categories: @income_categories, expense_categories: @expense_categories %>
diff --git a/app/views/transactions/searches/_form.html.erb b/app/views/transactions/searches/_form.html.erb
index eba44cb5..d11fe5cf 100644
--- a/app/views/transactions/searches/_form.html.erb
+++ b/app/views/transactions/searches/_form.html.erb
@@ -17,14 +17,13 @@
       </div>
     </div>
 
-    <%= render MenuComponent.new(variant: "button", no_padding: true) do |menu| %>
+    <%= render DS::Menu.new(variant: "button", no_padding: true) do |menu| %>
       <% menu.with_button(
         id: "transaction-filters-button",
         type: "button",
         text: "Filter",
         variant: "outline",
-        icon: "list-filter",
-        data: { menu_target: "button" }
+        icon: "list-filter"
       ) %>
 
       <% menu.with_custom_content do %>
diff --git a/app/views/transactions/searches/_menu.html.erb b/app/views/transactions/searches/_menu.html.erb
index 3d11a37a..0f2e9b09 100644
--- a/app/views/transactions/searches/_menu.html.erb
+++ b/app/views/transactions/searches/_menu.html.erb
@@ -1,6 +1,6 @@
 <%# locals: (form:) %>
 
-<%= render TabsComponent.new(
+<%= render DS::Tabs.new(
   variant: :unstyled,
   active_tab: get_default_transaction_search_filter[:key],
   active_btn_classes: "bg-surface text-primary",
@@ -28,7 +28,7 @@
       <div class="flex justify-between items-center gap-2 bg-container p-3 shrink-0">
         <div>
           <% if @q.present? %>
-            <%= render LinkComponent.new(
+            <%= render DS::Link.new(
             text: t(".clear_filters"),
             variant: "ghost",
             href: transactions_path(clear_filters: true),
@@ -37,8 +37,8 @@
         </div>
 
         <div>
-          <%= render ButtonComponent.new(text: t(".cancel"), type: "button", variant: "ghost", data: { action: "menu#close" }) %>
-          <%= render ButtonComponent.new(text: t(".apply")) %>
+          <%= render DS::Button.new(text: t(".cancel"), type: "button", variant: "ghost", data: { action: "DS--menu#close" }) %>
+          <%= render DS::Button.new(text: t(".apply")) %>
         </div>
       </div>
     </div>
diff --git a/app/views/transactions/searches/filters/_merchant_filter.html.erb b/app/views/transactions/searches/filters/_merchant_filter.html.erb
index 3166374c..c7df8c0b 100644
--- a/app/views/transactions/searches/filters/_merchant_filter.html.erb
+++ b/app/views/transactions/searches/filters/_merchant_filter.html.erb
@@ -16,7 +16,7 @@
                            merchant.name,
                            nil %>
         <%= form.label :merchants, value: merchant.name, class: "text-sm text-primary flex items-center gap-2" do %>
-          <%= render FilledIconComponent.new(
+          <%= render DS::FilledIcon.new(
             variant: :text,
             hex_color: merchant.color,
             text: merchant.name,
diff --git a/app/views/transactions/searches/filters/_tag_filter.html.erb b/app/views/transactions/searches/filters/_tag_filter.html.erb
index 8cf20adc..76b19811 100644
--- a/app/views/transactions/searches/filters/_tag_filter.html.erb
+++ b/app/views/transactions/searches/filters/_tag_filter.html.erb
@@ -16,7 +16,7 @@
                            tag.name,
                            nil %>
         <%= form.label :tags, value: tag.name, class: "text-sm text-primary flex items-center gap-2" do %>
-          <%= render FilledIconComponent.new(
+          <%= render DS::FilledIcon.new(
             variant: :text,
             hex_color: tag.color || Tag::UNCATEGORIZED_COLOR,
             text: tag.name,
diff --git a/app/views/transactions/show.html.erb b/app/views/transactions/show.html.erb
index bb504536..4111cd43 100644
--- a/app/views/transactions/show.html.erb
+++ b/app/views/transactions/show.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new(variant: "drawer") do |dialog| %>
+<%= render DS::Dialog.new(variant: "drawer") do |dialog| %>
   <% dialog.with_header do %>
     <%= render "transactions/header", entry: @entry %>
   <% end %>
@@ -141,7 +141,7 @@
             <p class="text-secondary">Transfers and payments are special types of transactions that indicate money movement between 2 accounts.</p>
           </div>
 
-          <%= render LinkComponent.new(
+          <%= render DS::Link.new(
             text: "Open matcher",
             icon: "arrow-left-right",
             variant: "outline",
@@ -157,7 +157,7 @@
             <p class="text-secondary"><%= t(".delete_subtitle") %></p>
           </div>
 
-          <%= render ButtonComponent.new(
+          <%= render DS::Button.new(
             text: t(".delete"),
             variant: "outline-destructive",
             href: entry_path(@entry),
diff --git a/app/views/transfer_matches/new.html.erb b/app/views/transfer_matches/new.html.erb
index e4709e30..8a84b982 100644
--- a/app/views/transfer_matches/new.html.erb
+++ b/app/views/transfer_matches/new.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: "Match transfer or payment") %>
   <% dialog.with_body do %>
     <%= styled_form_with(
diff --git a/app/views/transfers/new.html.erb b/app/views/transfers/new.html.erb
index 5456f1b3..db8b7d76 100644
--- a/app/views/transfers/new.html.erb
+++ b/app/views/transfers/new.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".title")) %>
   <% dialog.with_body do %>
     <%= render "form", transfer: @transfer %>
diff --git a/app/views/transfers/show.html.erb b/app/views/transfers/show.html.erb
index dc587a4e..83e766b7 100644
--- a/app/views/transfers/show.html.erb
+++ b/app/views/transfers/show.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new(variant: "drawer") do |dialog| %>
+<%= render DS::Dialog.new(variant: "drawer") do |dialog| %>
   <% dialog.with_header do %>
     <div class="space-y-1">
       <div class="flex items-center gap-4">
diff --git a/app/views/users/_user_menu.html.erb b/app/views/users/_user_menu.html.erb
index 69d64d81..fcc2d688 100644
--- a/app/views/users/_user_menu.html.erb
+++ b/app/views/users/_user_menu.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (user:, placement: "right-start", offset: 16) %>
 
 <div data-testid="user-menu">
-  <%= render MenuComponent.new(variant: "avatar", avatar_url: user.profile_image&.variant(:small)&.url, initials: user.initials, placement: placement, offset: offset) do |menu| %>
+  <%= render DS::Menu.new(variant: "avatar", avatar_url: user.profile_image&.variant(:small)&.url, initials: user.initials, placement: placement, offset: offset) do |menu| %>
     <%= menu.with_header do %>
       <div class="px-4 py-3 flex items-center gap-3">
         <div class="w-9 h-9 shrink-0">
diff --git a/app/views/valuations/_valuation.html.erb b/app/views/valuations/_valuation.html.erb
index 176f21be..eeef903c 100644
--- a/app/views/valuations/_valuation.html.erb
+++ b/app/views/valuations/_valuation.html.erb
@@ -14,7 +14,7 @@
                         data: { id: entry.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection" } %>
 
         <div class="flex items-center gap-3">
-          <%= render FilledIconComponent.new(icon: icon, size: "sm", hex_color: color, rounded: true) %>
+          <%= render DS::FilledIcon.new(icon: icon, size: "sm", hex_color: color, rounded: true) %>
 
           <div class="truncate text-primary">
             <%= link_to entry.name,
diff --git a/app/views/valuations/confirm_create.html.erb b/app/views/valuations/confirm_create.html.erb
index 3e3a4a90..906c957d 100644
--- a/app/views/valuations/confirm_create.html.erb
+++ b/app/views/valuations/confirm_create.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: "Confirm new balance") %>
   <% dialog.with_body do %>
     <%= styled_form_with model: @entry, url: valuations_path, class: "space-y-4" do |form| %>
diff --git a/app/views/valuations/confirm_update.html.erb b/app/views/valuations/confirm_update.html.erb
index c24e27cf..720f7bd5 100644
--- a/app/views/valuations/confirm_update.html.erb
+++ b/app/views/valuations/confirm_update.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: "Update balance") %>
   <% dialog.with_body do %>
     <%= styled_form_with model: @entry, url: valuation_path(@entry), method: :patch, class: "space-y-4", data: { turbo_frame: :_top } do |form| %>
diff --git a/app/views/valuations/new.html.erb b/app/views/valuations/new.html.erb
index bfa8d5e2..cf805d67 100644
--- a/app/views/valuations/new.html.erb
+++ b/app/views/valuations/new.html.erb
@@ -1,11 +1,11 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".title")) %>
   <% dialog.with_body do %>
     <%= styled_form_with model: @entry, url: confirm_create_valuations_path, class: "space-y-4" do |form| %>
       <%= form.hidden_field :account_id %>
 
       <% if @error_message.present? %>
-        <%= render AlertComponent.new(message: @error_message, variant: :error) %>
+        <%= render DS::Alert.new(message: @error_message, variant: :error) %>
       <% end %>
 
       <div class="space-y-3">
diff --git a/app/views/valuations/show.html.erb b/app/views/valuations/show.html.erb
index 3cd44f9f..f58be03e 100644
--- a/app/views/valuations/show.html.erb
+++ b/app/views/valuations/show.html.erb
@@ -1,6 +1,6 @@
 <% entry, account = @entry, @entry.account %>
 
-<%= render DialogComponent.new(variant: "drawer") do |dialog| %>
+<%= render DS::Dialog.new(variant: "drawer") do |dialog| %>
   <% dialog.with_header do %>
     <%= render "valuations/header", entry: @entry %>
   <% end %>
@@ -8,7 +8,7 @@
   <% dialog.with_body do %>
     <% if @error_message.present? %>
       <div class="mb-4">
-        <%= render AlertComponent.new(message: @error_message, variant: :error) %>
+        <%= render DS::Alert.new(message: @error_message, variant: :error) %>
       </div>
     <% end %>
 
@@ -28,7 +28,7 @@
                 disable_currency: true %>
 
           <div class="flex justify-end">
-            <%= render ButtonComponent.new(
+            <%= render DS::Button.new(
               text: "Update value",
               variant: :primary,
               type: "submit"
diff --git a/app/views/vehicles/edit.html.erb b/app/views/vehicles/edit.html.erb
index 00424799..87308377 100644
--- a/app/views/vehicles/edit.html.erb
+++ b/app/views/vehicles/edit.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".edit", account: @account.name)) %>
   <% dialog.with_body do %>
     <%= render "form", account: @account, url: vehicle_path(@account) %>
diff --git a/app/views/vehicles/new.html.erb b/app/views/vehicles/new.html.erb
index 56422ce8..2f09bcf4 100644
--- a/app/views/vehicles/new.html.erb
+++ b/app/views/vehicles/new.html.erb
@@ -1,4 +1,4 @@
-<%= render DialogComponent.new do |dialog| %>
+<%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: t(".title")) %>
   <% dialog.with_body do %>
     <%= render "vehicles/form", account: @account, url: vehicles_path(return_to: params[:return_to]) %>
diff --git a/app/views/vehicles/tabs/_overview.html.erb b/app/views/vehicles/tabs/_overview.html.erb
index e8592533..b71793bb 100644
--- a/app/views/vehicles/tabs/_overview.html.erb
+++ b/app/views/vehicles/tabs/_overview.html.erb
@@ -33,7 +33,7 @@
 </div>
 
 <div class="flex justify-center py-8">
-  <%= render LinkComponent.new(
+  <%= render DS::Link.new(
     text: "Edit account details",
     variant: "ghost",
     href: edit_vehicle_path(account),
diff --git a/test/components/previews/alert_component_preview.rb b/test/components/previews/alert_component_preview.rb
index 34abcb37..ddd91183 100644
--- a/test/components/previews/alert_component_preview.rb
+++ b/test/components/previews/alert_component_preview.rb
@@ -2,6 +2,6 @@ class AlertComponentPreview < Lookbook::Preview
   # @param message text
   # @param variant select [info, success, warning, error]
   def default(message: "This is an alert message.", variant: :info)
-    render AlertComponent.new(message: message, variant: variant.to_sym)
+    render DS::Alert.new(message: message, variant: variant.to_sym)
   end
 end
diff --git a/test/components/previews/button_component_preview.rb b/test/components/previews/button_component_preview.rb
index 499d36b3..e6045ab2 100644
--- a/test/components/previews/button_component_preview.rb
+++ b/test/components/previews/button_component_preview.rb
@@ -1,10 +1,10 @@
 class ButtonComponentPreview < ViewComponent::Preview
-  # @param variant select {{ ButtonComponent::VARIANTS.keys }}
-  # @param size select {{ ButtonComponent::SIZES.keys }}
+  # @param variant select {{ DS::Button::VARIANTS.keys }}
+  # @param size select {{ DS::Button::SIZES.keys }}
   # @param disabled toggle
   # @param icon select ["plus", "circle"]
   def default(variant: "primary", size: "md", disabled: false, icon: "plus")
-    render ButtonComponent.new(
+    render DS::Button.new(
       text: "Sample button",
       variant: variant,
       size: size,
diff --git a/test/components/previews/dialog_component_preview.rb b/test/components/previews/dialog_component_preview.rb
index a1b81340..5f5c78d9 100644
--- a/test/components/previews/dialog_component_preview.rb
+++ b/test/components/previews/dialog_component_preview.rb
@@ -1,7 +1,7 @@
 class DialogComponentPreview < ViewComponent::Preview
   # @param show_overflow toggle
   def modal(show_overflow: false)
-    render DialogComponent.new(variant: "modal") do |dialog|
+    render DS::Dialog.new(variant: "modal") do |dialog|
       dialog.with_header(title: "Sample modal title")
 
       dialog.with_body do
@@ -21,7 +21,7 @@ class DialogComponentPreview < ViewComponent::Preview
 
   # @param show_overflow toggle
   def drawer(show_overflow: false)
-    render DialogComponent.new(variant: "drawer") do |dialog|
+    render DS::Dialog.new(variant: "drawer") do |dialog|
       dialog.with_header(title: "Drawer title")
 
       dialog.with_body do
diff --git a/test/components/previews/disclosure_component_preview.rb b/test/components/previews/disclosure_component_preview.rb
index ec6e6d1d..51b9a8a0 100644
--- a/test/components/previews/disclosure_component_preview.rb
+++ b/test/components/previews/disclosure_component_preview.rb
@@ -2,7 +2,7 @@ class DisclosureComponentPreview < ViewComponent::Preview
   # @display container_classes max-w-[400px]
   # @param align select ["left", "right"]
   def default(align: "right")
-    render DisclosureComponent.new(title: "Title", align: align, open: true) do |disclosure|
+    render DS::Disclosure.new(title: "Title", align: align, open: true) do |disclosure|
       disclosure.with_summary_content do
         content_tag(:p, "$200.25", class: "text-xs font-mono font-medium")
       end
diff --git a/test/components/previews/filled_icon_component_preview.rb b/test/components/previews/filled_icon_component_preview.rb
index c2670308..3b0ee022 100644
--- a/test/components/previews/filled_icon_component_preview.rb
+++ b/test/components/previews/filled_icon_component_preview.rb
@@ -1,11 +1,11 @@
 class FilledIconComponentPreview < ViewComponent::Preview
   # @param size select ["sm", "md", "lg"]
   def default(size: "md")
-    render FilledIconComponent.new(icon: "home", variant: :default, size: size)
+    render DS::FilledIcon.new(icon: "home", variant: :default, size: size)
   end
 
   # @param size select ["sm", "md", "lg"]
   def text(size: "md")
-    render FilledIconComponent.new(variant: :text, text: "Test", size: size, rounded: true)
+    render DS::FilledIcon.new(variant: :text, text: "Test", size: size, rounded: true)
   end
 end
diff --git a/test/components/previews/link_component_preview.rb b/test/components/previews/link_component_preview.rb
index 17150204..d3600bf3 100644
--- a/test/components/previews/link_component_preview.rb
+++ b/test/components/previews/link_component_preview.rb
@@ -2,17 +2,17 @@ class LinkComponentPreview < ViewComponent::Preview
   # Usage
   # -------------
   #
-  # LinkComponent is a small abstraction on top of the `link_to` helper.
+  # DS::Link is a small abstraction on top of the `link_to` helper.
   #
-  # It can be used as a regular link or styled as a "Link button" using any of the available ButtonComponent variants.
+  # It can be used as a regular link or styled as a "Link button" using any of the available DS::Button variants.
   #
-  # @param variant select {{ LinkComponent::VARIANTS.keys }}
-  # @param size select {{ LinkComponent::SIZES.keys }}
+  # @param variant select {{ DS::Link::VARIANTS.keys }}
+  # @param size select {{ DS::Link::SIZES.keys }}
   # @param icon select ["", "plus", "arrow-right"]
   # @param icon_position select ["left", "right"]
   # @param full_width toggle
   def default(variant: "default", size: "md", icon: "plus", icon_position: "left", full_width: false)
-    render LinkComponent.new(
+    render DS::Link.new(
       href: "#",
       text: "Preview link",
       variant: variant,
diff --git a/test/components/previews/menu_component_preview.rb b/test/components/previews/menu_component_preview.rb
index 6c210437..592b276c 100644
--- a/test/components/previews/menu_component_preview.rb
+++ b/test/components/previews/menu_component_preview.rb
@@ -1,19 +1,19 @@
 class MenuComponentPreview < ViewComponent::Preview
   def icon
-    render MenuComponent.new(variant: "icon") do |menu|
+    render DS::Menu.new(variant: "icon") do |menu|
       menu_contents(menu)
     end
   end
 
   def button
-    render MenuComponent.new(variant: "button") do |menu|
+    render DS::Menu.new(variant: "button") do |menu|
       menu.with_button(text: "Open menu", variant: "secondary")
       menu_contents(menu)
     end
   end
 
   def avatar
-    render MenuComponent.new(variant: "avatar") do |menu|
+    render DS::Menu.new(variant: "avatar") do |menu|
       menu_contents(menu)
     end
   end
diff --git a/test/components/previews/toggle_component_preview.rb b/test/components/previews/toggle_component_preview.rb
index 9ab3d014..27eeff52 100644
--- a/test/components/previews/toggle_component_preview.rb
+++ b/test/components/previews/toggle_component_preview.rb
@@ -2,7 +2,7 @@ class ToggleComponentPreview < ViewComponent::Preview
   # @param disabled toggle
   def default(disabled: false)
     render(
-      ToggleComponent.new(
+      DS::Toggle.new(
         id: "toggle-component-id",
         name: "toggle-component-name",
         checked: false,
diff --git a/test/system/accounts_test.rb b/test/system/accounts_test.rb
index e910a3ac..da1b5938 100644
--- a/test/system/accounts_test.rb
+++ b/test/system/accounts_test.rb
@@ -98,7 +98,7 @@ class AccountsTest < ApplicationSystemTestCase
   private
 
     def open_new_account_modal
-      within "[data-controller='tabs']" do
+      within "[data-controller='DS--tabs']" do
         click_button "All"
         click_link "New account"
       end