From 7b2b08cf89bdab332d14b68cd17cdfb4aa8a7113 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Mon, 14 Apr 2025 15:36:16 +0100
Subject: [PATCH] DEV: [gjs-codemod] Convert automation/styleguide/other to gjs

Co-authored-by: Jarek Radosz <jarek@cvx.dev>
---
 .../discourse/app/lib/utilities.js            |   4 +
 .../wizard/components/fields/checkbox.gjs     |  59 +-
 .../wizard/components/fields/checkboxes.gjs   |  40 +-
 .../fields/image-previews/generic.gjs         |   8 +-
 .../fields/styling-preview/-preview-base.gjs  |  20 +-
 .../fields/styling-preview/index.gjs          |  65 +-
 .../static/wizard/components/fields/text.gjs  |  22 +-
 .../color-palettes/color-palettes-row.gjs     |  22 +-
 .../addon/components/create-color-row.gjs     |   6 +-
 .../dropdown-select-box-row.gjs               |  36 +-
 .../email-group-user-chooser-row.gjs          |  55 +-
 .../select-kit/addon/components/flair-row.gjs |  25 +-
 .../future-date-input-selector-row.gjs        |  29 +-
 .../homepage-style-selector-row.gjs           |  19 +-
 .../mini-tag-chooser/selected-collection.gjs  |  37 +-
 .../multi-select/format-selected-content.gjs  |  10 +-
 .../multi-select/multi-select-filter.gjs      |  57 +-
 .../multi-select/selected-category.gjs        |  32 +-
 .../addon/components/none-category-row.gjs    |  41 +-
 .../notifications-filter-header.gjs           |  24 +-
 .../period-chooser/period-chooser-header.gjs  |  24 +-
 .../period-chooser/period-chooser-row.gjs     |  23 +-
 .../select-kit/errors-collection.gjs          |  20 +-
 .../components/select-kit/select-kit-body.gjs |  10 +-
 .../select-kit/select-kit-create-row.gjs      |  19 +-
 .../select-kit/select-kit-filter.gjs          |  58 +-
 .../select-kit/select-kit-none-row.gjs        |  19 +-
 .../components/select-kit/select-kit-row.gjs  |  23 +-
 .../addon/components/selected-choice.gjs      |  54 +-
 .../addon/components/selected-flair.gjs       |  25 +-
 .../addon/components/selected-name.gjs        |  98 ++-
 .../addon/components/tag-chooser-row.gjs      |   9 +-
 .../select-kit/addon/components/tag-row.gjs   |  25 +-
 .../toolbar-popup-menu-options-heading.gjs    |   6 +-
 .../select-kit/addon/components/topic-row.gjs |  29 +-
 .../components/user-chooser/user-row.gjs      |  18 +-
 .../javascripts/select-kit/package.json       |   3 +-
 .../admin/components/automation-field.gjs     |   4 +-
 .../da-category-notification-level-field.gjs  |   2 +-
 .../admin/components/form-error.gjs           |  10 +
 .../admin/components/topic-trigger.gjs        |  22 +
 .../admin/templates/components/form-error.hbs |   5 -
 .../templates/components/topic-trigger.hbs    |  12 -
 .../admin-plugins/show/automation/edit.gjs    | 383 +++++----
 .../admin-plugins/show/automation/index.gjs   |   7 +-
 .../admin-plugins/show/automation/new.gjs     |  64 +-
 .../components/da-boolean-field-test.gjs      |  11 +-
 .../components/da-categories-field-test.gjs   |  11 +-
 .../components/da-category-field-test.gjs     |  11 +-
 ...category-notification-level-field-test.gjs |  11 +-
 .../components/da-choices-field-test.gjs      |  11 +-
 .../components/da-custom-field-test.gjs       |  11 +-
 .../components/da-date-time-field-test.gjs    |  11 +-
 .../da-email-group-user-field-test.gjs        |   6 +-
 .../components/da-group-field-test.gjs        |  11 +-
 .../components/da-groups-field-test.gjs       |  20 +-
 .../components/da-message-field-test.gjs      |  20 +-
 .../components/da-pms-field-test.gjs          |  11 +-
 .../components/da-post-field-test.gjs         |  11 +-
 .../components/da-tags-field-test.gjs         |  11 +-
 .../components/da-text-field-test.gjs         |  11 +-
 .../components/da-text-list-field-test.gjs    |  11 +-
 .../components/da-trust-levels-field-test.gjs |  11 +-
 .../components/da-user-field-test.gjs         |  11 +-
 .../components/da-users-field-test.gjs        |  20 +-
 .../chat-composer-message-details.gjs         |  50 +-
 .../components/styleguide/chat-composer.gjs   |  67 +-
 .../styleguide/chat-header-icon.gjs           | 136 +--
 .../components/styleguide/chat-message.gjs    | 108 ++-
 .../styleguide/chat-modal-archive-channel.gjs |  23 +-
 .../styleguide/chat-modal-create-channel.gjs  |  23 +-
 .../styleguide/chat-modal-delete-channel.gjs  |  23 +-
 .../chat-modal-edit-channel-description.gjs   |  23 +-
 .../chat-modal-edit-channel-name.gjs          |  23 +-
 .../chat-modal-move-message-to-channel.gjs    |  23 +-
 .../styleguide/chat-modal-new-message.gjs     |  23 +-
 .../styleguide/chat-modal-thread-settings.gjs |  23 +-
 .../chat-modal-toggle-channel-status.gjs      |  23 +-
 .../styleguide/chat-thread-list-item.gjs      |  27 +-
 .../components/modal/local-dates-create.gjs   | 387 +++++----
 .../before-composer-controls/presence.gjs     |   9 +-
 .../topic-above-footer-buttons/presence.gjs   |   9 +-
 .../components/modal/poll-breakdown.gjs       | 172 ++--
 .../components/modal/poll-ui-builder.gjs      | 528 ++++++------
 .../component/poll-buttons-dropdown-test.gjs  | 108 ++-
 .../javascripts/component/poll-info-test.gjs  |  70 +-
 .../component/poll-options-test.gjs           | 130 +--
 .../component/poll-results-pie-test.gjs       |   8 +-
 .../poll-results-ranked-choice-test.gjs       |  18 +-
 .../component/poll-results-standard-test.gjs  | 138 +--
 .../component/poll-results-tabs-test.gjs      |  96 ++-
 .../test/javascripts/component/poll-test.gjs  |  44 +-
 .../component/poll-ui-builder-test.gjs        |  28 +-
 .../discourse/components/color-example.gjs    |  11 +-
 .../sections/atoms/01-font-scale.gjs          | 167 ++--
 .../components/sections/atoms/02-buttons.gjs  | 334 ++++----
 .../components/sections/atoms/03-colors.gjs   | 226 ++---
 .../components/sections/atoms/04-icons.gjs    |  55 +-
 .../components/sections/atoms/05-forms.gjs    | 518 ++++++------
 .../components/sections/atoms/06-spinners.gjs |  17 +-
 .../sections/atoms/date-time-inputs.gjs       |  56 +-
 .../components/sections/atoms/dropdowns.gjs   | 310 +++----
 .../components/sections/atoms/topic-link.gjs  |  12 +-
 .../sections/atoms/topic-statuses.gjs         |  48 +-
 .../sections/molecules/bread-crumbs.gjs       |  20 +-
 .../sections/molecules/categories.gjs         |  46 +-
 .../sections/molecules/char-counter.gjs       |  25 +-
 .../sections/molecules/empty-state.gjs        |  12 +-
 .../sections/molecules/footer-message.gjs     |  52 +-
 .../components/sections/molecules/menus.gjs   | 225 ++---
 .../sections/molecules/navigation-bar.gjs     |  64 +-
 .../sections/molecules/navigation-stacked.gjs |  42 +-
 .../sections/molecules/post-menu.gjs          |  20 +-
 .../sections/molecules/signup-cta.gjs         |  12 +-
 .../components/sections/molecules/toasts.gjs  | 215 ++---
 .../sections/molecules/tooltips.gjs           | 211 ++---
 .../sections/molecules/topic-list-item.gjs    |  70 +-
 .../molecules/topic-notifications.gjs         |  18 +-
 .../sections/molecules/topic-timer-info.gjs   |  12 +-
 .../components/sections/organisms/00-post.gjs |  20 +-
 .../sections/organisms/02-topic-map.gjs       |  18 +-
 .../organisms/03-topic-footer-buttons.gjs     |  31 +-
 .../sections/organisms/04-topic-list.gjs      |  18 +-
 .../sections/organisms/basic-topic-list.gjs   |  12 +-
 .../sections/organisms/categories-list.gjs    |  12 +-
 .../components/sections/organisms/modal.gjs   | 163 ++--
 .../sections/organisms/navigation.gjs         |  35 +-
 .../sections/organisms/suggested-topics.gjs   |  12 +-
 .../sections/organisms/user-about.gjs         | 783 +++++++++---------
 .../components/sections/syntax/00-bem.gjs     | 157 ++--
 .../components/styleguide-example.gjs         |  12 +-
 .../discourse/components/styleguide-icons.gjs |  17 +-
 .../discourse/components/styleguide-link.gjs  |  19 +-
 .../components/styleguide-section.gjs         |  28 +-
 .../styleguide/calendar-date-time-input.gjs   |  79 +-
 .../components/styleguide/component.gjs       |  65 +-
 .../components/styleguide/controls.gjs        |  13 +-
 .../components/styleguide/controls/row.gjs    |  19 +-
 .../components/styleguide/controls/toggle.gjs |   8 +-
 .../components/toggle-color-mode.gjs          |  11 +-
 .../discourse/templates/styleguide.gjs        |  44 +-
 .../discourse/templates/styleguide/index.gjs  |  18 +-
 .../discourse/templates/styleguide/show.gjs   |  25 +-
 pnpm-lock.yaml                                |   3 +
 144 files changed, 4859 insertions(+), 3715 deletions(-)
 create mode 100644 plugins/automation/admin/assets/javascripts/admin/components/form-error.gjs
 create mode 100644 plugins/automation/admin/assets/javascripts/admin/components/topic-trigger.gjs
 delete mode 100644 plugins/automation/admin/assets/javascripts/admin/templates/components/form-error.hbs
 delete mode 100644 plugins/automation/admin/assets/javascripts/admin/templates/components/topic-trigger.hbs

diff --git a/app/assets/javascripts/discourse/app/lib/utilities.js b/app/assets/javascripts/discourse/app/lib/utilities.js
index cdbb4e950bd..24c4d1ac636 100644
--- a/app/assets/javascripts/discourse/app/lib/utilities.js
+++ b/app/assets/javascripts/discourse/app/lib/utilities.js
@@ -794,3 +794,7 @@ export function isPrimaryTab() {
     }
   });
 }
+
+export function optionalRequire(path, name = "default") {
+  return require.has(path) && require(path)[name];
+}
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkbox.gjs b/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkbox.gjs
index ca8443c8580..75706573e8c 100644
--- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkbox.gjs
+++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkbox.gjs
@@ -1,31 +1,36 @@
-import Component from "@ember/component";
+import Component, { Input } from "@ember/component";
+import { hash } from "@ember/helper";
 import { tagName } from "@ember-decorators/component";
+import PluginOutlet from "discourse/components/plugin-outlet";
+import icon from "discourse/helpers/d-icon";
 
 @tagName("")
-export default class Checkbox extends Component {}
+export default class Checkbox extends Component {
+  <template>
+    <label class="wizard-container__label">
+      <PluginOutlet
+        @name="wizard-checkbox"
+        @outletArgs={{hash disabled=this.field.disabled}}
+      >
+        <Input
+          @type="checkbox"
+          disabled={{this.field.disabled}}
+          class="wizard-container__checkbox"
+          @checked={{this.field.value}}
+        />
+        <span class="wizard-container__checkbox-slider"></span>
+        {{#if this.field.icon}}
+          {{icon this.field.icon}}
+        {{/if}}
+        <span class="wizard-container__checkbox-label">
+          {{this.field.placeholder}}
+        </span>
+      </PluginOutlet>
 
-<label class="wizard-container__label">
-  <PluginOutlet
-    @name="wizard-checkbox"
-    @outletArgs={{hash disabled=this.field.disabled}}
-  >
-    <Input
-      @type="checkbox"
-      disabled={{this.field.disabled}}
-      class="wizard-container__checkbox"
-      @checked={{this.field.value}}
-    />
-    <span class="wizard-container__checkbox-slider"></span>
-    {{#if this.field.icon}}
-      {{d-icon this.field.icon}}
-    {{/if}}
-    <span class="wizard-container__checkbox-label">
-      {{this.field.placeholder}}
-    </span>
-  </PluginOutlet>
-
-  <PluginOutlet
-    @name="below-wizard-checkbox"
-    @outletArgs={{hash disabled=this.field.disabled}}
-  />
-</label>
\ No newline at end of file
+      <PluginOutlet
+        @name="below-wizard-checkbox"
+        @outletArgs={{hash disabled=this.field.disabled}}
+      />
+    </label>
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkboxes.gjs b/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkboxes.gjs
index 50959f080b7..111e984cd0a 100644
--- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkboxes.gjs
+++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkboxes.gjs
@@ -1,5 +1,7 @@
-import Component from "@ember/component";
+import Component, { Input } from "@ember/component";
+import { on } from "@ember/modifier";
 import { action, set } from "@ember/object";
+import icon from "discourse/helpers/d-icon";
 
 export default class Checkboxes extends Component {
   init(...args) {
@@ -30,21 +32,23 @@ export default class Checkboxes extends Component {
     }
     this.set("field.value", newFieldValue);
   }
-}
 
-{{#each this.field.choices as |c|}}
-  <div class="checkbox-field-choice {{this.fieldClass}}">
-    <label id={{c.id}} value={{c.label}}>
-      <Input
-        @type="checkbox"
-        class="wizard-container__checkbox"
-        @checked={{c.checked}}
-        {{on "click" (action "changed")}}
-      />
-      {{#if c.icon}}
-        {{d-icon c.icon}}
-      {{/if}}
-      {{c.label}}
-    </label>
-  </div>
-{{/each}}
\ No newline at end of file
+  <template>
+    {{#each this.field.choices as |c|}}
+      <div class="checkbox-field-choice {{this.fieldClass}}">
+        <label id={{c.id}} value={{c.label}}>
+          <Input
+            @type="checkbox"
+            class="wizard-container__checkbox"
+            @checked={{c.checked}}
+            {{on "click" (action "changed")}}
+          />
+          {{#if c.icon}}
+            {{icon c.icon}}
+          {{/if}}
+          {{c.label}}
+        </label>
+      </div>
+    {{/each}}
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/generic.gjs b/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/generic.gjs
index 7906d639a37..ce4eb980b06 100644
--- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/generic.gjs
+++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/generic.gjs
@@ -2,6 +2,8 @@ import Component from "@ember/component";
 import { classNameBindings } from "@ember-decorators/component";
 
 @classNameBindings(":wizard-image-preview", "fieldClass")
-export default class Generic extends Component {}
-
-<img src={{this.field.value}} class={{this.fieldClass}} />
\ No newline at end of file
+export default class Generic extends Component {
+  <template>
+    <img src={{this.field.value}} class={{this.fieldClass}} />
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.gjs b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.gjs
index cdaa3616f5f..084c9c7022f 100644
--- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.gjs
+++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.gjs
@@ -446,6 +446,17 @@ export default class PreviewBase extends Component {
       unreadTextX + ctx.measureText(unreadText).width + headerMargin * 2.0;
     ctx.fillText(topText, topTextX, pillButtonTextY);
   }
+
+  <template>
+    <div class="wizard-container__preview">
+      <canvas
+        width={{this.elementWidth}}
+        height={{this.elementHeight}}
+        style={{this.canvasStyle}}
+      >
+      </canvas>
+    </div>
+  </template>
 }
 
 function loadImage(src) {
@@ -457,12 +468,3 @@ function loadImage(src) {
   img.src = getUrl(src);
   return new Promise((resolve) => (img.onload = () => resolve(img)));
 }
-
-<div class="wizard-container__preview">
-  <canvas
-    width={{this.elementWidth}}
-    height={{this.elementHeight}}
-    style={{this.canvasStyle}}
-  >
-  </canvas>
-</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.gjs b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.gjs
index 06b7be1f4ef..d95e8f3b50f 100644
--- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.gjs
+++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.gjs
@@ -1,3 +1,4 @@
+import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { observes } from "@ember-decorators/object";
 import { bind } from "discourse/lib/decorators";
@@ -247,35 +248,37 @@ export default class Index extends PreviewBaseComponent {
     event?.preventDefault();
     this.set("previewTopic", true);
   }
+
+  <template>
+    <div class="previews {{if this.draggingActive 'dragging'}}">
+      <div class="wizard-container__preview topic-preview">
+        <canvas
+          width={{this.elementWidth}}
+          height={{this.elementHeight}}
+          style={{this.canvasStyle}}
+        >
+        </canvas>
+      </div>
+      <div class="wizard-container__preview homepage-preview">
+        <this.HomepagePreview @wizard={{this.wizard}} @step={{this.step}} />
+      </div>
+    </div>
+
+    <div class="preview-nav">
+      <a
+        href
+        class="preview-nav-button {{if this.previewTopic 'active'}}"
+        {{on "click" this.setPreviewTopic}}
+      >
+        {{i18n "wizard.previews.topic_preview"}}
+      </a>
+      <a
+        href
+        class="preview-nav-button {{unless this.previewTopic 'active'}}"
+        {{on "click" this.setPreviewHomepage}}
+      >
+        {{i18n "wizard.previews.homepage_preview"}}
+      </a>
+    </div>
+  </template>
 }
-
-<div class="previews {{if this.draggingActive 'dragging'}}">
-  <div class="wizard-container__preview topic-preview">
-    <canvas
-      width={{this.elementWidth}}
-      height={{this.elementHeight}}
-      style={{this.canvasStyle}}
-    >
-    </canvas>
-  </div>
-  <div class="wizard-container__preview homepage-preview">
-    <this.HomepagePreview @wizard={{this.wizard}} @step={{this.step}} />
-  </div>
-</div>
-
-<div class="preview-nav">
-  <a
-    href
-    class="preview-nav-button {{if this.previewTopic 'active'}}"
-    {{on "click" this.setPreviewTopic}}
-  >
-    {{i18n "wizard.previews.topic_preview"}}
-  </a>
-  <a
-    href
-    class="preview-nav-button {{unless this.previewTopic 'active'}}"
-    {{on "click" this.setPreviewHomepage}}
-  >
-    {{i18n "wizard.previews.homepage_preview"}}
-  </a>
-</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/text.gjs b/app/assets/javascripts/discourse/app/static/wizard/components/fields/text.gjs
index 08841ba8263..23bbc0156e6 100644
--- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/text.gjs
+++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/text.gjs
@@ -1,11 +1,13 @@
-import Component from "@ember/component";
+import Component, { Input } from "@ember/component";
 
-export default class Text extends Component {}
-
-<Input
-  id={{this.field.id}}
-  @value={{this.field.value}}
-  class="wizard-container__text-input"
-  placeholder={{this.field.placeholder}}
-  tabindex="9"
-/>
\ No newline at end of file
+export default class Text extends Component {
+  <template>
+    <Input
+      id={{this.field.id}}
+      @value={{this.field.value}}
+      class="wizard-container__text-input"
+      placeholder={{this.field.placeholder}}
+      tabindex="9"
+    />
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/color-palettes/color-palettes-row.gjs b/app/assets/javascripts/select-kit/addon/components/color-palettes/color-palettes-row.gjs
index 368084f95de..53bb786de3b 100644
--- a/app/assets/javascripts/select-kit/addon/components/color-palettes/color-palettes-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/color-palettes/color-palettes-row.gjs
@@ -29,14 +29,16 @@ export default class ColorPalettesRow extends SelectKitRowComponent {
       return "";
     }
   }
+
+  <template>
+    <span class="name">
+      {{this.label}}
+    </span>
+
+    {{#if this.item.colors}}
+      <div class="palettes" style={{this.backgroundColor}}>
+        {{this.palettes}}
+      </div>
+    {{/if}}
+  </template>
 }
-
-<span class="name">
-  {{this.label}}
-</span>
-
-{{#if this.item.colors}}
-  <div class="palettes" style={{this.backgroundColor}}>
-    {{this.palettes}}
-  </div>
-{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/select-kit/addon/components/create-color-row.gjs b/app/assets/javascripts/select-kit/addon/components/create-color-row.gjs
index 2dea1d68c65..23773d596dd 100644
--- a/app/assets/javascripts/select-kit/addon/components/create-color-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/create-color-row.gjs
@@ -15,6 +15,8 @@ export default class CreateColorRow extends SelectKitRowComponent {
         : `#${color}`;
     });
   }
-}
 
-<span>{{this.label}}</span>
\ No newline at end of file
+  <template>
+    <span>{{this.label}}</span>
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/dropdown-select-box/dropdown-select-box-row.gjs b/app/assets/javascripts/select-kit/addon/components/dropdown-select-box/dropdown-select-box-row.gjs
index 643acf6417c..47a5a81e03a 100644
--- a/app/assets/javascripts/select-kit/addon/components/dropdown-select-box/dropdown-select-box-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/dropdown-select-box/dropdown-select-box-row.gjs
@@ -1,24 +1,28 @@
 import { readOnly } from "@ember/object/computed";
+import { htmlSafe } from "@ember/template";
 import { classNames } from "@ember-decorators/component";
+import icon from "discourse/helpers/d-icon";
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
 
 @classNames("dropdown-select-box-row")
 export default class DropdownSelectBoxRow extends SelectKitRowComponent {
   @readOnly("item.description") description;
+
+  <template>
+    {{#if this.icons}}
+      <div class="icons">
+        <span class="selection-indicator"></span>
+        {{#each this.icons as |i|}}
+          {{icon i}}
+        {{/each}}
+      </div>
+    {{/if}}
+
+    <div class="texts">
+      <span class="name">{{htmlSafe this.label}}</span>
+      {{#if this.description}}
+        <span class="desc">{{htmlSafe this.description}}</span>
+      {{/if}}
+    </div>
+  </template>
 }
-
-{{#if this.icons}}
-  <div class="icons">
-    <span class="selection-indicator"></span>
-    {{#each this.icons as |icon|}}
-      {{d-icon icon}}
-    {{/each}}
-  </div>
-{{/if}}
-
-<div class="texts">
-  <span class="name">{{html-safe this.label}}</span>
-  {{#if this.description}}
-    <span class="desc">{{html-safe this.description}}</span>
-  {{/if}}
-</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/select-kit/addon/components/email-group-user-chooser-row.gjs b/app/assets/javascripts/select-kit/addon/components/email-group-user-chooser-row.gjs
index b84ca9dceaa..5b13d1594b4 100644
--- a/app/assets/javascripts/select-kit/addon/components/email-group-user-chooser-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/email-group-user-chooser-row.gjs
@@ -1,26 +1,37 @@
 import { classNames } from "@ember-decorators/component";
+import { and } from "truth-helpers";
+import UserStatusMessage from "discourse/components/user-status-message";
+import avatar from "discourse/helpers/avatar";
+import icon from "discourse/helpers/d-icon";
+import decorateUsernameSelector from "discourse/helpers/decorate-username-selector";
+import formatUsername from "discourse/helpers/format-username";
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
 
 @classNames("email-group-user-chooser-row")
-export default class EmailGroupUserChooserRow extends SelectKitRowComponent {}
-
-{{#if this.item.isUser}}
-  {{avatar this.item imageSize="tiny"}}
-  <div>
-    <span class="identifier">{{format-username this.item.id}}</span>
-    <span class="name">{{this.item.name}}</span>
-  </div>
-  {{#if (and this.item.showUserStatus this.item.status)}}
-    <UserStatusMessage @status={{this.item.status}} @showDescription={{true}} />
-  {{/if}}
-  {{decorate-username-selector this.item.id}}
-{{else if this.item.isGroup}}
-  {{d-icon "users"}}
-  <div>
-    <span class="identifier">{{this.item.id}}</span>
-    <span class="name">{{this.item.full_name}}</span>
-  </div>
-{{else}}
-  {{d-icon "envelope"}}
-  <span class="identifier">{{this.item.id}}</span>
-{{/if}}
\ No newline at end of file
+export default class EmailGroupUserChooserRow extends SelectKitRowComponent {
+  <template>
+    {{#if this.item.isUser}}
+      {{avatar this.item imageSize="tiny"}}
+      <div>
+        <span class="identifier">{{formatUsername this.item.id}}</span>
+        <span class="name">{{this.item.name}}</span>
+      </div>
+      {{#if (and this.item.showUserStatus this.item.status)}}
+        <UserStatusMessage
+          @status={{this.item.status}}
+          @showDescription={{true}}
+        />
+      {{/if}}
+      {{decorateUsernameSelector this.item.id}}
+    {{else if this.item.isGroup}}
+      {{icon "users"}}
+      <div>
+        <span class="identifier">{{this.item.id}}</span>
+        <span class="name">{{this.item.full_name}}</span>
+      </div>
+    {{else}}
+      {{icon "envelope"}}
+      <span class="identifier">{{this.item.id}}</span>
+    {{/if}}
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/flair-row.gjs b/app/assets/javascripts/select-kit/addon/components/flair-row.gjs
index 411b77a8aa3..d3bf5a1a2a3 100644
--- a/app/assets/javascripts/select-kit/addon/components/flair-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/flair-row.gjs
@@ -1,16 +1,19 @@
 import { classNames } from "@ember-decorators/component";
+import AvatarFlair from "discourse/components/avatar-flair";
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
 
 @classNames("flair-row")
-export default class FlairRow extends SelectKitRowComponent {}
+export default class FlairRow extends SelectKitRowComponent {
+  <template>
+    {{#if this.item.url}}
+      <AvatarFlair
+        @flairName={{this.item.name}}
+        @flairUrl={{this.item.url}}
+        @flairBgColor={{this.item.bgColor}}
+        @flairColor={{this.item.color}}
+      />
+    {{/if}}
 
-{{#if this.item.url}}
-  <AvatarFlair
-    @flairName={{this.item.name}}
-    @flairUrl={{this.item.url}}
-    @flairBgColor={{this.item.bgColor}}
-    @flairColor={{this.item.color}}
-  />
-{{/if}}
-
-<span>{{this.label}}</span>
\ No newline at end of file
+    <span>{{this.label}}</span>
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/future-date-input-selector/future-date-input-selector-row.gjs b/app/assets/javascripts/select-kit/addon/components/future-date-input-selector/future-date-input-selector-row.gjs
index f60b4984c75..bdbab018d74 100644
--- a/app/assets/javascripts/select-kit/addon/components/future-date-input-selector/future-date-input-selector-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/future-date-input-selector/future-date-input-selector-row.gjs
@@ -1,19 +1,22 @@
 import { classNames } from "@ember-decorators/component";
+import icon from "discourse/helpers/d-icon";
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
 
 @classNames("future-date-input-selector-row")
-export default class FutureDateInputSelectorRow extends SelectKitRowComponent {}
+export default class FutureDateInputSelectorRow extends SelectKitRowComponent {
+  <template>
+    {{#if this.item.icon}}
+      <div class="future-date-input-selector-icons">
+        {{icon this.item.icon}}
+      </div>
+    {{/if}}
 
-{{#if this.item.icon}}
-  <div class="future-date-input-selector-icons">
-    {{d-icon this.item.icon}}
-  </div>
-{{/if}}
+    <span class="name">{{this.label}}</span>
 
-<span class="name">{{this.label}}</span>
-
-{{#if this.item.timeFormatted}}
-  <span class="future-date-input-selector-datetime">
-    {{this.item.timeFormatted}}
-  </span>
-{{/if}}
\ No newline at end of file
+    {{#if this.item.timeFormatted}}
+      <span class="future-date-input-selector-datetime">
+        {{this.item.timeFormatted}}
+      </span>
+    {{/if}}
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.gjs b/app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.gjs
index 440776a9977..e939588122e 100644
--- a/app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.gjs
@@ -1,12 +1,15 @@
+import { htmlSafe } from "@ember/template";
 import { classNames } from "@ember-decorators/component";
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
 
 @classNames("homepage-style-selector-row")
-export default class HomepageStyleSelectorRow extends SelectKitRowComponent {}
-
-<div class="texts">
-  <span class="name">{{html-safe this.label}}</span>
-  {{#if this.item.description}}
-    <span class="desc">{{html-safe this.item.description}}</span>
-  {{/if}}
-</div>
\ No newline at end of file
+export default class HomepageStyleSelectorRow extends SelectKitRowComponent {
+  <template>
+    <div class="texts">
+      <span class="name">{{htmlSafe this.label}}</span>
+      {{#if this.item.description}}
+        <span class="desc">{{htmlSafe this.item.description}}</span>
+      {{/if}}
+    </div>
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/mini-tag-chooser/selected-collection.gjs b/app/assets/javascripts/select-kit/addon/components/mini-tag-chooser/selected-collection.gjs
index ef8ccdf430d..89e3a9424bc 100644
--- a/app/assets/javascripts/select-kit/addon/components/mini-tag-chooser/selected-collection.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/mini-tag-chooser/selected-collection.gjs
@@ -1,7 +1,10 @@
 import Component from "@ember/component";
+import { fn } from "@ember/helper";
 import { computed } from "@ember/object";
 import { reads } from "@ember/object/computed";
 import { tagName } from "@ember-decorators/component";
+import DButton from "discourse/components/d-button";
+import discourseTag from "discourse/helpers/discourse-tag";
 
 @tagName("")
 export default class SelectedCollection extends Component {
@@ -27,20 +30,22 @@ export default class SelectedCollection extends Component {
       };
     });
   }
-}
 
-{{#if this.tags}}
-  <div class="mini-tag-chooser-selected-collection selected-tags">
-    {{#each this.tags as |tag|}}
-      <DButton
-        @translatedTitle={{tag.value}}
-        @icon="xmark"
-        @action={{fn (action this.selectKit.deselect) tag.value}}
-        tabindex="0"
-        class={{tag.classNames}}
-      >
-        {{discourse-tag tag.value noHref=true}}
-      </DButton>
-    {{/each}}
-  </div>
-{{/if}}
\ No newline at end of file
+  <template>
+    {{#if this.tags}}
+      <div class="mini-tag-chooser-selected-collection selected-tags">
+        {{#each this.tags as |tag|}}
+          <DButton
+            @translatedTitle={{tag.value}}
+            @icon="xmark"
+            @action={{fn (action this.selectKit.deselect) tag.value}}
+            tabindex="0"
+            class={{tag.classNames}}
+          >
+            {{discourseTag tag.value noHref=true}}
+          </DButton>
+        {{/each}}
+      </div>
+    {{/if}}
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/multi-select/format-selected-content.gjs b/app/assets/javascripts/select-kit/addon/components/multi-select/format-selected-content.gjs
index 007ee618448..efb95c1d4b1 100644
--- a/app/assets/javascripts/select-kit/addon/components/multi-select/format-selected-content.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/multi-select/format-selected-content.gjs
@@ -21,8 +21,10 @@ export default class FormatSelectedContent extends Component.extend(
       return this.getName(this.selectKit.noneItem);
     }
   }
-}
 
-<span class="formatted-selection">
-  {{this.formattedContent}}
-</span>
\ No newline at end of file
+  <template>
+    <span class="formatted-selection">
+      {{this.formattedContent}}
+    </span>
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.gjs b/app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.gjs
index f9dd2dbb520..05fc22434cd 100644
--- a/app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.gjs
@@ -1,6 +1,9 @@
+import { Input } from "@ember/component";
+import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { isEmpty } from "@ember/utils";
 import { classNames } from "@ember-decorators/component";
+import icon from "discourse/helpers/d-icon";
 import discourseComputed from "discourse/lib/decorators";
 import SelectKitFilterComponent from "select-kit/components/select-kit/select-kit-filter";
 
@@ -34,30 +37,32 @@ export default class MultiSelectFilter extends SelectKitFilterComponent {
       return false;
     }
   }
+
+  <template>
+    {{#unless this.isHidden}}
+      {{! filter-input-search prevents 1password from attempting autocomplete }}
+      {{! template-lint-disable no-pointer-down-event-binding }}
+
+      <Input
+        tabindex={{0}}
+        class="filter-input"
+        placeholder={{this.computedPlaceholder}}
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        name="filter-input-search"
+        spellcheck={{false}}
+        @value={{readonly this.selectKit.filter}}
+        @type="search"
+        {{on "paste" (action "onPaste")}}
+        {{on "keydown" (action "onKeydown")}}
+        {{on "keyup" (action "onKeyup")}}
+        {{on "input" (action "onInput")}}
+      />
+
+      {{#if this.selectKit.options.filterIcon}}
+        {{icon this.selectKit.options.filterIcon class="filter-icon"}}
+      {{/if}}
+    {{/unless}}
+  </template>
 }
-
-{{#unless this.isHidden}}
-  {{! filter-input-search prevents 1password from attempting autocomplete }}
-  {{! template-lint-disable no-pointer-down-event-binding }}
-
-  <Input
-    tabindex={{0}}
-    class="filter-input"
-    placeholder={{this.computedPlaceholder}}
-    autocomplete="off"
-    autocorrect="off"
-    autocapitalize="off"
-    name="filter-input-search"
-    spellcheck={{false}}
-    @value={{readonly this.selectKit.filter}}
-    @type="search"
-    {{on "paste" (action "onPaste")}}
-    {{on "keydown" (action "onKeydown")}}
-    {{on "keyup" (action "onKeyup")}}
-    {{on "input" (action "onInput")}}
-  />
-
-  {{#if this.selectKit.options.filterIcon}}
-    {{d-icon this.selectKit.options.filterIcon class="filter-icon"}}
-  {{/if}}
-{{/unless}}
\ No newline at end of file
diff --git a/app/assets/javascripts/select-kit/addon/components/multi-select/selected-category.gjs b/app/assets/javascripts/select-kit/addon/components/multi-select/selected-category.gjs
index d09e33cb94e..a5492784cee 100644
--- a/app/assets/javascripts/select-kit/addon/components/multi-select/selected-category.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/multi-select/selected-category.gjs
@@ -1,7 +1,9 @@
+import { on } from "@ember/modifier";
 import { computed } from "@ember/object";
 import { htmlSafe } from "@ember/template";
 import { classNames } from "@ember-decorators/component";
 import { categoryBadgeHTML } from "discourse/helpers/category-link";
+import icon from "discourse/helpers/d-icon";
 import SelectedNameComponent from "select-kit/components/selected-name";
 
 @classNames("selected-category")
@@ -15,18 +17,20 @@ export default class SelectedCategory extends SelectedNameComponent {
       })
     );
   }
-}
 
-<div
-  {{on "click" this.onSelectedNameClick}}
-  tabindex="0"
-  title={{this.title}}
-  data-value={{this.value}}
-  data-name={{this.name}}
-  class="select-kit-selected-name selected-name choice"
->
-  <div class="body">
-    {{this.badge}}
-    {{d-icon "xmark"}}
-  </div>
-</div>
\ No newline at end of file
+  <template>
+    <div
+      {{on "click" this.onSelectedNameClick}}
+      tabindex="0"
+      title={{this.title}}
+      data-value={{this.value}}
+      data-name={{this.name}}
+      class="select-kit-selected-name selected-name choice"
+    >
+      <div class="body">
+        {{this.badge}}
+        {{icon "xmark"}}
+      </div>
+    </div>
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/none-category-row.gjs b/app/assets/javascripts/select-kit/addon/components/none-category-row.gjs
index 8f71f5c5e55..9c65beae496 100644
--- a/app/assets/javascripts/select-kit/addon/components/none-category-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/none-category-row.gjs
@@ -1,6 +1,7 @@
 import { htmlSafe } from "@ember/template";
 import { classNames } from "@ember-decorators/component";
 import { categoryBadgeHTML } from "discourse/helpers/category-link";
+import dirSpan from "discourse/helpers/dir-span";
 import discourseComputed from "discourse/lib/decorators";
 import CategoryRowComponent from "select-kit/components/category-row";
 
@@ -16,24 +17,26 @@ export default class NoneCategoryRow extends CategoryRowComponent {
       })
     );
   }
-}
 
-{{#if this.category}}
-  <div class="category-status" aria-hidden="true">
-    {{#if this.hasParentCategory}}
-      {{#unless this.hideParentCategory}}
-        {{this.badgeForParentCategory}}
-      {{/unless}}
+  <template>
+    {{#if this.category}}
+      <div class="category-status" aria-hidden="true">
+        {{#if this.hasParentCategory}}
+          {{#unless this.hideParentCategory}}
+            {{this.badgeForParentCategory}}
+          {{/unless}}
+        {{/if}}
+        {{this.badgeForCategory}}
+      </div>
+
+      {{#if this.shouldDisplayDescription}}
+        <div class="category-desc" aria-hidden="true">{{dirSpan
+            this.descriptionText
+            htmlSafe="true"
+          }}</div>
+      {{/if}}
+    {{else}}
+      {{htmlSafe this.label}}
     {{/if}}
-    {{this.badgeForCategory}}
-  </div>
-
-  {{#if this.shouldDisplayDescription}}
-    <div class="category-desc" aria-hidden="true">{{dir-span
-        this.descriptionText
-        htmlSafe="true"
-      }}</div>
-  {{/if}}
-{{else}}
-  {{html-safe this.label}}
-{{/if}}
\ No newline at end of file
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/notifications-filter/notifications-filter-header.gjs b/app/assets/javascripts/select-kit/addon/components/notifications-filter/notifications-filter-header.gjs
index c9a084893ca..022688718e4 100644
--- a/app/assets/javascripts/select-kit/addon/components/notifications-filter/notifications-filter-header.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/notifications-filter/notifications-filter-header.gjs
@@ -1,6 +1,8 @@
 import { classNames } from "@ember-decorators/component";
+import icon from "discourse/helpers/d-icon";
 import { fmt } from "discourse/lib/computed";
 import discourseComputed from "discourse/lib/decorators";
+import { i18n } from "discourse-i18n";
 import DropdownSelectBoxHeaderComponent from "select-kit/components/dropdown-select-box/dropdown-select-box-header";
 
 @classNames("notifications-filter-header", "btn-flat")
@@ -11,14 +13,16 @@ export default class NotificationsFilterHeader extends DropdownSelectBoxHeaderCo
   caretIcon(isExpanded) {
     return isExpanded ? "caret-up" : "caret-down";
   }
-}
 
-<div class="select-kit-header-wrapper">
-  <span class="filter-text">
-    {{i18n "user.user_notifications.filters.filter_by"}}
-  </span>
-  <span class="header-text">
-    {{i18n this.label}}
-  </span>
-  {{d-icon this.caretIcon class="caret-icon"}}
-</div>
\ No newline at end of file
+  <template>
+    <div class="select-kit-header-wrapper">
+      <span class="filter-text">
+        {{i18n "user.user_notifications.filters.filter_by"}}
+      </span>
+      <span class="header-text">
+        {{i18n this.label}}
+      </span>
+      {{icon this.caretIcon class="caret-icon"}}
+    </div>
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-header.gjs b/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-header.gjs
index 4db69063d34..67cff616797 100644
--- a/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-header.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-header.gjs
@@ -1,4 +1,6 @@
 import { classNames } from "@ember-decorators/component";
+import icon from "discourse/helpers/d-icon";
+import periodTitle from "discourse/helpers/period-title";
 import discourseComputed from "discourse/lib/decorators";
 import DropdownSelectBoxHeaderComponent from "select-kit/components/dropdown-select-box/dropdown-select-box-header";
 
@@ -8,14 +10,16 @@ export default class PeriodChooserHeader extends DropdownSelectBoxHeaderComponen
   caretIcon(isExpanded) {
     return isExpanded ? "caret-up" : "caret-down";
   }
+
+  <template>
+    <h2 class="selected-name" title={{this.title}}>
+      {{periodTitle
+        this.value
+        showDateRange=true
+        fullDay=this.selectKit.options.fullDay
+      }}
+    </h2>
+
+    {{icon this.caretIcon class="caret-icon"}}
+  </template>
 }
-
-<h2 class="selected-name" title={{this.title}}>
-  {{period-title
-    this.value
-    showDateRange=true
-    fullDay=this.selectKit.options.fullDay
-  }}
-</h2>
-
-{{d-icon this.caretIcon class="caret-icon"}}
\ No newline at end of file
diff --git a/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-row.gjs b/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-row.gjs
index 6da4d8131d7..cf85428821c 100644
--- a/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-row.gjs
@@ -1,4 +1,5 @@
 import { classNames } from "@ember-decorators/component";
+import periodTitle from "discourse/helpers/period-title";
 import discourseComputed from "discourse/lib/decorators";
 import { i18n } from "discourse-i18n";
 import DropdownSelectBoxRowComponent from "select-kit/components/dropdown-select-box/dropdown-select-box-row";
@@ -9,14 +10,16 @@ export default class PeriodChooserRow extends DropdownSelectBoxRowComponent {
   title(rowName) {
     return i18n(`filters.top.${rowName || "this_week"}`).title;
   }
+
+  <template>
+    <span class="selection-indicator"></span>
+
+    <span class="period-title">
+      {{periodTitle
+        this.rowValue
+        showDateRange=true
+        fullDay=this.selectKit.options.fullDay
+      }}
+    </span>
+  </template>
 }
-
-<span class="selection-indicator"></span>
-
-<span class="period-title">
-  {{period-title
-    this.rowValue
-    showDateRange=true
-    fullDay=this.selectKit.options.fullDay
-  }}
-</span>
\ No newline at end of file
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/errors-collection.gjs b/app/assets/javascripts/select-kit/addon/components/select-kit/errors-collection.gjs
index c8ed3d2c3ad..0ba9c541234 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/errors-collection.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit/errors-collection.gjs
@@ -2,12 +2,14 @@ import Component from "@ember/component";
 import { tagName } from "@ember-decorators/component";
 
 @tagName("")
-export default class ErrorsCollection extends Component {}
-
-{{#if this.collection.content}}
-  <ul class="select-kit-errors-collection">
-    {{#each this.collection.content as |item|}}
-      <li class="select-kit-error">{{item}}</li>
-    {{/each}}
-  </ul>
-{{/if}}
\ No newline at end of file
+export default class ErrorsCollection extends Component {
+  <template>
+    {{#if this.collection.content}}
+      <ul class="select-kit-errors-collection">
+        {{#each this.collection.content as |item|}}
+          <li class="select-kit-error">{{item}}</li>
+        {{/each}}
+      </ul>
+    {{/if}}
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.gjs b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.gjs
index b5fa73742ae..2a59c7bfe6d 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.gjs
@@ -61,8 +61,10 @@ export default class SelectKitBody extends Component {
       this.selectKit.close(event);
     });
   }
-}
 
-{{#if this.selectKit.isExpanded}}
-  {{yield}}
-{{/if}}
\ No newline at end of file
+  <template>
+    {{#if this.selectKit.isExpanded}}
+      {{yield}}
+    {{/if}}
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-create-row.gjs b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-create-row.gjs
index fcae72786b4..cfb9846fc67 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-create-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-create-row.gjs
@@ -1,13 +1,16 @@
 import { classNames } from "@ember-decorators/component";
+import icon from "discourse/helpers/d-icon";
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
 
 @classNames("create")
-export default class SelectKitCreateRow extends SelectKitRowComponent {}
+export default class SelectKitCreateRow extends SelectKitRowComponent {
+  <template>
+    {{#each this.icons as |i|}}
+      {{icon i translatedTitle=this.dasherizedTitle}}
+    {{/each}}
 
-{{#each this.icons as |icon|}}
-  {{d-icon icon translatedTitle=this.dasherizedTitle}}
-{{/each}}
-
-<span class="name">
-  {{this.label}}
-</span>
\ No newline at end of file
+    <span class="name">
+      {{this.label}}
+    </span>
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-filter.gjs b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-filter.gjs
index 9b9913d317a..bbfb3672cda 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-filter.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-filter.gjs
@@ -1,4 +1,5 @@
-import Component from "@ember/component";
+import Component, { Input } from "@ember/component";
+import { on } from "@ember/modifier";
 import { action, computed } from "@ember/object";
 import { not } from "@ember/object/computed";
 import { isPresent } from "@ember/utils";
@@ -7,6 +8,7 @@ import {
   classNameBindings,
   classNames,
 } from "@ember-decorators/component";
+import icon from "discourse/helpers/d-icon";
 import discourseComputed from "discourse/lib/decorators";
 import { i18n } from "discourse-i18n";
 import UtilsMixin from "select-kit/mixins/utils";
@@ -137,30 +139,32 @@ export default class SelectKitFilter extends Component.extend(UtilsMixin) {
 
     this.selectKit.set("highlighted", null);
   }
+
+  <template>
+    {{#unless this.isHidden}}
+      {{! filter-input-search prevents 1password from attempting autocomplete }}
+      {{! template-lint-disable no-pointer-down-event-binding }}
+
+      <Input
+        tabindex={{0}}
+        class="filter-input"
+        placeholder={{this.placeholder}}
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        name="filter-input-search"
+        spellcheck={{false}}
+        @value={{readonly this.selectKit.filter}}
+        @type="search"
+        {{on "paste" (action "onPaste")}}
+        {{on "keydown" (action "onKeydown")}}
+        {{on "keyup" (action "onKeyup")}}
+        {{on "input" (action "onInput")}}
+      />
+
+      {{#if this.selectKit.options.filterIcon}}
+        {{icon this.selectKit.options.filterIcon class="filter-icon"}}
+      {{/if}}
+    {{/unless}}
+  </template>
 }
-
-{{#unless this.isHidden}}
-  {{! filter-input-search prevents 1password from attempting autocomplete }}
-  {{! template-lint-disable no-pointer-down-event-binding }}
-
-  <Input
-    tabindex={{0}}
-    class="filter-input"
-    placeholder={{this.placeholder}}
-    autocomplete="off"
-    autocorrect="off"
-    autocapitalize="off"
-    name="filter-input-search"
-    spellcheck={{false}}
-    @value={{readonly this.selectKit.filter}}
-    @type="search"
-    {{on "paste" (action "onPaste")}}
-    {{on "keydown" (action "onKeydown")}}
-    {{on "keyup" (action "onKeyup")}}
-    {{on "input" (action "onInput")}}
-  />
-
-  {{#if this.selectKit.options.filterIcon}}
-    {{d-icon this.selectKit.options.filterIcon class="filter-icon"}}
-  {{/if}}
-{{/unless}}
\ No newline at end of file
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-none-row.gjs b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-none-row.gjs
index d7999750a72..60ed01e8b8c 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-none-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-none-row.gjs
@@ -1,13 +1,16 @@
 import { classNames } from "@ember-decorators/component";
+import icon from "discourse/helpers/d-icon";
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
 
 @classNames("none")
-export default class SelectKitNoneRow extends SelectKitRowComponent {}
+export default class SelectKitNoneRow extends SelectKitRowComponent {
+  <template>
+    {{#each this.icons as |i|}}
+      {{icon i translatedTitle=this.dasherizedTitle}}
+    {{/each}}
 
-{{#each this.icons as |icon|}}
-  {{d-icon icon translatedTitle=this.dasherizedTitle}}
-{{/each}}
-
-<span class="name">
-  {{this.label}}
-</span>
\ No newline at end of file
+    <span class="name">
+      {{this.label}}
+    </span>
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.gjs b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.gjs
index fc01d418ac1..498aa8d46a2 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.gjs
@@ -9,6 +9,7 @@ import {
   classNames,
   tagName,
 } from "@ember-decorators/component";
+import icon from "discourse/helpers/d-icon";
 import { makeArray } from "discourse/lib/helpers";
 import { i18n } from "discourse-i18n";
 import UtilsMixin from "select-kit/mixins/utils";
@@ -117,9 +118,9 @@ export default class SelectKitRow extends Component.extend(UtilsMixin) {
 
   @computed("item.{icon,icons}")
   get icons() {
-    const icon = makeArray(this.getProperty(this.item, "icon"));
+    const _icon = makeArray(this.getProperty(this.item, "icon"));
     const icons = makeArray(this.getProperty(this.item, "icons"));
-    return icon.concat(icons).filter(Boolean);
+    return _icon.concat(icons).filter(Boolean);
   }
 
   @computed("selectKit.highlighted")
@@ -203,12 +204,14 @@ export default class SelectKitRow extends Component.extend(UtilsMixin) {
       }
     }
   }
+
+  <template>
+    {{#each this.icons as |i|}}
+      {{icon i translatedTitle=this.dasherizedTitle}}
+    {{/each}}
+
+    <span class="name">
+      {{this.label}}
+    </span>
+  </template>
 }
-
-{{#each this.icons as |icon|}}
-  {{d-icon icon translatedTitle=this.dasherizedTitle}}
-{{/each}}
-
-<span class="name">
-  {{this.label}}
-</span>
\ No newline at end of file
diff --git a/app/assets/javascripts/select-kit/addon/components/selected-choice.gjs b/app/assets/javascripts/select-kit/addon/components/selected-choice.gjs
index 926eb8fa79f..2bd760f73f3 100644
--- a/app/assets/javascripts/select-kit/addon/components/selected-choice.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/selected-choice.gjs
@@ -1,7 +1,11 @@
 import Component from "@ember/component";
+import { fn } from "@ember/helper";
+import { on } from "@ember/modifier";
 import { computed } from "@ember/object";
 import { guidFor } from "@ember/object/internals";
 import { tagName } from "@ember-decorators/component";
+import icon from "discourse/helpers/d-icon";
+import { i18n } from "discourse-i18n";
 import UtilsMixin from "select-kit/mixins/utils";
 
 @tagName("")
@@ -39,30 +43,32 @@ export default class SelectedChoice extends Component.extend(UtilsMixin) {
     }
     return this.mandatoryValuesArray.includes(this.item.id);
   }
-}
 
-{{#if this.readOnly}}
-  <button
-    class="btn btn-default disabled"
-    title={{I18n "admin.site_settings.mandatory_group"}}
-  >{{this.itemName}}</button>
-{{else}}
-  <button
-    {{on "click" (fn this.selectKit.deselect this.item)}}
-    aria-label={{i18n "select_kit.delete_item" name=this.itemName}}
-    data-value={{this.itemValue}}
-    data-name={{this.itemName}}
-    type="button"
-    id="{{this.id}}-choice"
-    class="btn btn-default selected-choice {{this.extraClass}}"
-  >
-    {{d-icon "xmark"}}
-    {{#if (has-block)}}
-      {{yield}}
+  <template>
+    {{#if this.readOnly}}
+      <button
+        class="btn btn-default disabled"
+        title={{i18n "admin.site_settings.mandatory_group"}}
+      >{{this.itemName}}</button>
     {{else}}
-      <span class="d-button-label">
-        {{this.itemName}}
-      </span>
+      <button
+        {{on "click" (fn this.selectKit.deselect this.item)}}
+        aria-label={{i18n "select_kit.delete_item" name=this.itemName}}
+        data-value={{this.itemValue}}
+        data-name={{this.itemName}}
+        type="button"
+        id="{{this.id}}-choice"
+        class="btn btn-default selected-choice {{this.extraClass}}"
+      >
+        {{icon "xmark"}}
+        {{#if (has-block)}}
+          {{yield}}
+        {{else}}
+          <span class="d-button-label">
+            {{this.itemName}}
+          </span>
+        {{/if}}
+      </button>
     {{/if}}
-  </button>
-{{/if}}
\ No newline at end of file
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/selected-flair.gjs b/app/assets/javascripts/select-kit/addon/components/selected-flair.gjs
index 02e55132370..4f361d107f1 100644
--- a/app/assets/javascripts/select-kit/addon/components/selected-flair.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/selected-flair.gjs
@@ -1,16 +1,19 @@
 import { tagName } from "@ember-decorators/component";
+import AvatarFlair from "discourse/components/avatar-flair";
 import SelectedNameComponent from "select-kit/components/selected-name";
 
 @tagName("")
-export default class SelectedFlair extends SelectedNameComponent {}
+export default class SelectedFlair extends SelectedNameComponent {
+  <template>
+    {{#if this.item.url}}
+      <AvatarFlair
+        @flairName={{this.item.name}}
+        @flairUrl={{this.item.url}}
+        @flairBgColor={{this.item.bgColor}}
+        @flairColor={{this.item.color}}
+      />
+    {{/if}}
 
-{{#if this.item.url}}
-  <AvatarFlair
-    @flairName={{this.item.name}}
-    @flairUrl={{this.item.url}}
-    @flairBgColor={{this.item.bgColor}}
-    @flairColor={{this.item.color}}
-  />
-{{/if}}
-
-<span>{{this.label}}</span>
\ No newline at end of file
+    <span>{{this.label}}</span>
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/selected-name.gjs b/app/assets/javascripts/select-kit/addon/components/selected-name.gjs
index b2e86f463b5..c7b7978a861 100644
--- a/app/assets/javascripts/select-kit/addon/components/selected-name.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/selected-name.gjs
@@ -1,8 +1,12 @@
 import Component from "@ember/component";
+import { fn } from "@ember/helper";
 import { computed, get } from "@ember/object";
 import { reads } from "@ember/object/computed";
 import { guidFor } from "@ember/object/internals";
 import { tagName } from "@ember-decorators/component";
+import { and } from "truth-helpers";
+import DButton from "discourse/components/d-button";
+import icon from "discourse/helpers/d-icon";
 import { makeArray } from "discourse/lib/helpers";
 import UtilsMixin from "select-kit/mixins/utils";
 
@@ -77,9 +81,9 @@ export default class SelectedName extends Component.extend(UtilsMixin) {
 
   @computed("item.{icon,icons}")
   get icons() {
-    const icon = makeArray(this._safeProperty("icon", this.item));
+    const _icon = makeArray(this._safeProperty("icon", this.item));
     const icons = makeArray(this._safeProperty("icons", this.item));
-    return icon.concat(icons).filter(Boolean);
+    return _icon.concat(icons).filter(Boolean);
   }
 
   _safeProperty(name, content) {
@@ -89,48 +93,50 @@ export default class SelectedName extends Component.extend(UtilsMixin) {
 
     return get(content, name);
   }
+
+  <template>
+    {{#if this.selectKit.options.showFullTitle}}
+      <div
+        lang={{this.lang}}
+        title={{this.title}}
+        data-value={{this.value}}
+        data-name={{this.name}}
+        class="select-kit-selected-name selected-name choice"
+      >
+        {{#if this.selectKit.options.formName}}
+          <input
+            type="hidden"
+            name={{this.selectKit.options.formName}}
+            value={{this.value}}
+          />
+        {{/if}}
+
+        {{#if (and this.renderIcon this.item.icon)}}
+          {{icon this.item.icon}}
+        {{/if}}
+
+        <span class="name">
+          {{this.label}}
+        </span>
+
+        {{#if this.shouldDisplayClearableButton}}
+          <DButton
+            @icon="xmark"
+            @action={{fn this.selectKit.deselect this.item}}
+            @ariaLabel="clear_input"
+            class="btn-clear"
+          />
+        {{/if}}
+      </div>
+    {{else}}
+      {{#if this.item.icon}}
+        <div
+          lang={{this.lang}}
+          class="select-kit-selected-name selected-name choice"
+        >
+          {{icon this.item.icon}}
+        </div>
+      {{/if}}
+    {{/if}}
+  </template>
 }
-
-{{#if this.selectKit.options.showFullTitle}}
-  <div
-    lang={{this.lang}}
-    title={{this.title}}
-    data-value={{this.value}}
-    data-name={{this.name}}
-    class="select-kit-selected-name selected-name choice"
-  >
-    {{#if this.selectKit.options.formName}}
-      <input
-        type="hidden"
-        name={{this.selectKit.options.formName}}
-        value={{this.value}}
-      />
-    {{/if}}
-
-    {{#if (and this.renderIcon this.item.icon)}}
-      {{d-icon this.item.icon}}
-    {{/if}}
-
-    <span class="name">
-      {{this.label}}
-    </span>
-
-    {{#if this.shouldDisplayClearableButton}}
-      <DButton
-        @icon="xmark"
-        @action={{fn this.selectKit.deselect this.item}}
-        @ariaLabel="clear_input"
-        class="btn-clear"
-      />
-    {{/if}}
-  </div>
-{{else}}
-  {{#if this.item.icon}}
-    <div
-      lang={{this.lang}}
-      class="select-kit-selected-name selected-name choice"
-    >
-      {{d-icon this.item.icon}}
-    </div>
-  {{/if}}
-{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/select-kit/addon/components/tag-chooser-row.gjs b/app/assets/javascripts/select-kit/addon/components/tag-chooser-row.gjs
index 6cb92358e2a..4999170a620 100644
--- a/app/assets/javascripts/select-kit/addon/components/tag-chooser-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/tag-chooser-row.gjs
@@ -1,7 +1,10 @@
 import { classNames } from "@ember-decorators/component";
+import discourseTag from "discourse/helpers/discourse-tag";
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
 
 @classNames("tag-chooser-row")
-export default class TagChooserRow extends SelectKitRowComponent {}
-
-{{discourse-tag this.rowValue count=this.item.count noHref=true}}
\ No newline at end of file
+export default class TagChooserRow extends SelectKitRowComponent {
+  <template>
+    {{discourseTag this.rowValue count=this.item.count noHref=true}}
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/tag-row.gjs b/app/assets/javascripts/select-kit/addon/components/tag-row.gjs
index 5b60601a66d..17e8d2642db 100644
--- a/app/assets/javascripts/select-kit/addon/components/tag-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/tag-row.gjs
@@ -1,4 +1,5 @@
 import { classNames } from "@ember-decorators/component";
+import discourseTag from "discourse/helpers/discourse-tag";
 import discourseComputed from "discourse/lib/decorators";
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
 
@@ -8,15 +9,17 @@ export default class TagRow extends SelectKitRowComponent {
   isTag(item) {
     return item.id !== "no-tags" && item.id !== "all-tags";
   }
-}
 
-{{#if this.isTag}}
-  {{discourse-tag
-    this.rowValue
-    noHref=true
-    description=this.item.description
-    count=this.item.count
-  }}
-{{else}}
-  <span class="name">{{this.item.name}}</span>
-{{/if}}
\ No newline at end of file
+  <template>
+    {{#if this.isTag}}
+      {{discourseTag
+        this.rowValue
+        noHref=true
+        description=this.item.description
+        count=this.item.count
+      }}
+    {{else}}
+      <span class="name">{{this.item.name}}</span>
+    {{/if}}
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/toolbar-popup-menu-options/toolbar-popup-menu-options-heading.gjs b/app/assets/javascripts/select-kit/addon/components/toolbar-popup-menu-options/toolbar-popup-menu-options-heading.gjs
index a46f1ce9d99..b231038110f 100644
--- a/app/assets/javascripts/select-kit/addon/components/toolbar-popup-menu-options/toolbar-popup-menu-options-heading.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/toolbar-popup-menu-options/toolbar-popup-menu-options-heading.gjs
@@ -1,5 +1,5 @@
 import Component from "@ember/component";
 
-export default class ToolbarPopupMenuOptionsHeading extends Component {}
-
-{{this.heading}}
\ No newline at end of file
+export default class ToolbarPopupMenuOptionsHeading extends Component {
+  <template>{{this.heading}}</template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/topic-row.gjs b/app/assets/javascripts/select-kit/addon/components/topic-row.gjs
index c16e4fad798..b2d561fc38c 100644
--- a/app/assets/javascripts/select-kit/addon/components/topic-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/topic-row.gjs
@@ -1,16 +1,21 @@
 import { classNames } from "@ember-decorators/component";
+import TopicStatus from "discourse/components/topic-status";
+import boundCategoryLink from "discourse/helpers/bound-category-link";
+import replaceEmoji from "discourse/helpers/replace-emoji";
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
 
 @classNames("topic-row")
-export default class TopicRow extends SelectKitRowComponent {}
-
-<TopicStatus @topic={{this.item}} @disableActions={{true}} />
-<div class="topic-title">{{replace-emoji this.item.title}}</div>
-<div class="topic-categories">
-  {{bound-category-link
-    this.item.category
-    ancestors=this.item.category.predecessors
-    hideParent=true
-    link=false
-  }}
-</div>
\ No newline at end of file
+export default class TopicRow extends SelectKitRowComponent {
+  <template>
+    <TopicStatus @topic={{this.item}} @disableActions={{true}} />
+    <div class="topic-title">{{replaceEmoji this.item.title}}</div>
+    <div class="topic-categories">
+      {{boundCategoryLink
+        this.item.category
+        ancestors=this.item.category.predecessors
+        hideParent=true
+        link=false
+      }}
+    </div>
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/addon/components/user-chooser/user-row.gjs b/app/assets/javascripts/select-kit/addon/components/user-chooser/user-row.gjs
index b81abd3eea8..77fb9dc30c3 100644
--- a/app/assets/javascripts/select-kit/addon/components/user-chooser/user-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/user-chooser/user-row.gjs
@@ -1,13 +1,17 @@
 import { classNames } from "@ember-decorators/component";
+import avatar from "discourse/helpers/avatar";
+import formatUsername from "discourse/helpers/format-username";
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
 
 @classNames("user-row")
-export default class UserRow extends SelectKitRowComponent {}
+export default class UserRow extends SelectKitRowComponent {
+  <template>
+    {{avatar this.item imageSize="tiny"}}
 
-{{avatar this.item imageSize="tiny"}}
+    <span class="username">{{formatUsername this.item.username}}</span>
 
-<span class="username">{{format-username this.item.username}}</span>
-
-{{#if this.item.name}}
-  <span class="name">{{this.item.name}}</span>
-{{/if}}
\ No newline at end of file
+    {{#if this.item.name}}
+      <span class="name">{{this.item.name}}</span>
+    {{/if}}
+  </template>
+}
diff --git a/app/assets/javascripts/select-kit/package.json b/app/assets/javascripts/select-kit/package.json
index 45f4ed3c633..8d3d7751b76 100644
--- a/app/assets/javascripts/select-kit/package.json
+++ b/app/assets/javascripts/select-kit/package.json
@@ -20,7 +20,8 @@
     "ember-auto-import": "^2.10.0",
     "ember-cli-babel": "^8.2.0",
     "ember-cli-htmlbars": "^6.3.0",
-    "ember-template-imports": "^4.3.0"
+    "ember-template-imports": "^4.3.0",
+    "truth-helpers": "workspace:*"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.2.0",
diff --git a/plugins/automation/admin/assets/javascripts/admin/components/automation-field.gjs b/plugins/automation/admin/assets/javascripts/admin/components/automation-field.gjs
index eb8a5a669da..ed8f68b7893 100644
--- a/plugins/automation/admin/assets/javascripts/admin/components/automation-field.gjs
+++ b/plugins/automation/admin/assets/javascripts/admin/components/automation-field.gjs
@@ -3,7 +3,7 @@ import I18n, { i18n } from "discourse-i18n";
 import DaBooleanField from "./fields/da-boolean-field";
 import DaCategoriesField from "./fields/da-categories-field";
 import DaCategoryField from "./fields/da-category-field";
-import DaCategoryNotificationlevelField from "./fields/da-category-notification-level-field";
+import DaCategoryNotificationLevelField from "./fields/da-category-notification-level-field";
 import DaChoicesField from "./fields/da-choices-field";
 import DaCustomField from "./fields/da-custom-field";
 import DaCustomFields from "./fields/da-custom-fields";
@@ -44,7 +44,7 @@ const FIELD_COMPONENTS = {
   group: DaGroupField,
   groups: DaGroupsField,
   choices: DaChoicesField,
-  category_notification_level: DaCategoryNotificationlevelField,
+  category_notification_level: DaCategoryNotificationLevelField,
   email_group_user: DaEmailGroupUserField,
   custom_field: DaCustomField,
   custom_fields: DaCustomFields,
diff --git a/plugins/automation/admin/assets/javascripts/admin/components/fields/da-category-notification-level-field.gjs b/plugins/automation/admin/assets/javascripts/admin/components/fields/da-category-notification-level-field.gjs
index 1e6a1eaeeb5..5a124b6b2a6 100644
--- a/plugins/automation/admin/assets/javascripts/admin/components/fields/da-category-notification-level-field.gjs
+++ b/plugins/automation/admin/assets/javascripts/admin/components/fields/da-category-notification-level-field.gjs
@@ -3,7 +3,7 @@ import BaseField from "./da-base-field";
 import DAFieldDescription from "./da-field-description";
 import DAFieldLabel from "./da-field-label";
 
-export default class CategoryNotficationLevelField extends BaseField {
+export default class CategoryNotificationLevelField extends BaseField {
   <template>
     <section class="field category-notification-level-field">
       <div class="control-group">
diff --git a/plugins/automation/admin/assets/javascripts/admin/components/form-error.gjs b/plugins/automation/admin/assets/javascripts/admin/components/form-error.gjs
new file mode 100644
index 00000000000..9c101f906b4
--- /dev/null
+++ b/plugins/automation/admin/assets/javascripts/admin/components/form-error.gjs
@@ -0,0 +1,10 @@
+import htmlSafe from "discourse/helpers/html-safe";
+
+const FormError = <template>
+  {{#if @error}}
+    <div class="alert alert-error form-errors">
+      {{htmlSafe @error}}
+    </div>
+  {{/if}}
+</template>;
+export default FormError;
diff --git a/plugins/automation/admin/assets/javascripts/admin/components/topic-trigger.gjs b/plugins/automation/admin/assets/javascripts/admin/components/topic-trigger.gjs
new file mode 100644
index 00000000000..25b92bdbdb0
--- /dev/null
+++ b/plugins/automation/admin/assets/javascripts/admin/components/topic-trigger.gjs
@@ -0,0 +1,22 @@
+import { Input } from "@ember/component";
+import { on } from "@ember/modifier";
+import { i18n } from "discourse-i18n";
+
+const TopicTrigger = <template>
+  <div class="control-group">
+    <label class="control-label">
+      {{i18n "discourse_automation.triggerables.topic.topic_id.label"}}
+    </label>
+
+    <div class="controls">
+      <Input
+        @value={{this.metadata.topic_id}}
+        {{on
+          "input"
+          (action (mut this.metadata.topic_id) value="target.value")
+        }}
+      />
+    </div>
+  </div>
+</template>;
+export default TopicTrigger;
diff --git a/plugins/automation/admin/assets/javascripts/admin/templates/components/form-error.hbs b/plugins/automation/admin/assets/javascripts/admin/templates/components/form-error.hbs
deleted file mode 100644
index 62ce4fc41f3..00000000000
--- a/plugins/automation/admin/assets/javascripts/admin/templates/components/form-error.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-{{#if @error}}
-  <div class="alert alert-error form-errors">
-    {{html-safe @error}}
-  </div>
-{{/if}}
\ No newline at end of file
diff --git a/plugins/automation/admin/assets/javascripts/admin/templates/components/topic-trigger.hbs b/plugins/automation/admin/assets/javascripts/admin/templates/components/topic-trigger.hbs
deleted file mode 100644
index bf89f192936..00000000000
--- a/plugins/automation/admin/assets/javascripts/admin/templates/components/topic-trigger.hbs
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="control-group">
-  <label class="control-label">
-    {{i18n "discourse_automation.triggerables.topic.topic_id.label"}}
-  </label>
-
-  <div class="controls">
-    <Input
-      @value={{this.metadata.topic_id}}
-      {{on "input" (action (mut this.metadata.topic_id) value="target.value")}}
-    />
-  </div>
-</div>
\ No newline at end of file
diff --git a/plugins/automation/admin/assets/javascripts/discourse/templates/admin-plugins/show/automation/edit.gjs b/plugins/automation/admin/assets/javascripts/discourse/templates/admin-plugins/show/automation/edit.gjs
index b1075fbc26a..1e2c465f8fa 100644
--- a/plugins/automation/admin/assets/javascripts/discourse/templates/admin-plugins/show/automation/edit.gjs
+++ b/plugins/automation/admin/assets/javascripts/discourse/templates/admin-plugins/show/automation/edit.gjs
@@ -1,189 +1,228 @@
-<div class="admin-detail discourse-automation-edit discourse-automation-form">
-  <BackButton
-    @label="discourse_automation.back"
-    @route="adminPlugins.show.automation.index"
-    class="discourse-automation-back"
-  />
-  <AdminConfigAreaCard @heading="discourse_automation.select_script">
-    <:content>
-      <form class="form-horizontal">
-        <FormError @error={{this.error}} />
+import { Input } from "@ember/component";
+import { fn, hash } from "@ember/helper";
+import { on } from "@ember/modifier";
+import RouteTemplate from "ember-route-template";
+import { and } from "truth-helpers";
+import BackButton from "discourse/components/back-button";
+import DButton from "discourse/components/d-button";
+import TextField from "discourse/components/text-field";
+import withEventValue from "discourse/helpers/with-event-value";
+import { i18n } from "discourse-i18n";
+import AdminConfigAreaCard from "admin/components/admin-config-area-card";
+import ComboBox from "select-kit/components/combo-box";
+import AutomationField from "discourse/plugins/automation/admin/components/automation-field";
+import FormError from "discourse/plugins/automation/admin/components/form-error";
 
-        <section class="form-section edit">
-          <div class="control-group">
-            <label class="control-label">
-              {{i18n "discourse_automation.models.automation.name.label"}}
-            </label>
+export default RouteTemplate(
+  <template>
+    <div
+      class="admin-detail discourse-automation-edit discourse-automation-form"
+    >
+      <BackButton
+        @label="discourse_automation.back"
+        @route="adminPlugins.show.automation.index"
+        class="discourse-automation-back"
+      />
+      <AdminConfigAreaCard @heading="discourse_automation.select_script">
+        <:content>
+          <form class="form-horizontal">
+            <FormError @error={{@controller.error}} />
 
-            <div class="controls">
-              <TextField
-                @value={{this.automationForm.name}}
-                @type="text"
-                @autofocus={{true}}
-                @name="automation-name"
-                class="input-large"
-                @input={{with-event-value (fn (mut this.automationForm.name))}}
-              />
-            </div>
-          </div>
+            <section class="form-section edit">
+              <div class="control-group">
+                <label class="control-label">
+                  {{i18n "discourse_automation.models.automation.name.label"}}
+                </label>
 
-          <div class="control-group">
-            <label class="control-label">
-              {{i18n "discourse_automation.models.script.name.label"}}
-            </label>
-
-            <div class="controls">
-              <ComboBox
-                @value={{this.automationForm.script}}
-                @content={{this.model.scriptables}}
-                @onChange={{this.onChangeScript}}
-                @options={{hash filterable=true}}
-                class="scriptables"
-              />
-            </div>
-          </div>
-        </section>
-
-        <section class="trigger-section form-section edit">
-          <h2 class="title">
-            {{i18n
-              "discourse_automation.edit_automation.trigger_section.title"
-            }}
-          </h2>
-
-          <div class="control-group">
-            {{#if this.model.automation.script.forced_triggerable}}
-              <div class="alert alert-warning">
-                {{i18n
-                  "discourse_automation.edit_automation.trigger_section.forced"
-                }}
-              </div>
-            {{/if}}
-
-            <label class="control-label">
-              {{i18n "discourse_automation.models.trigger.name.label"}}
-            </label>
-
-            <div class="controls">
-              <ComboBox
-                @value={{this.automationForm.trigger}}
-                @content={{this.model.triggerables}}
-                @onChange={{this.onChangeTrigger}}
-                @options={{hash
-                  filterable=true
-                  none="discourse_automation.select_trigger"
-                  disabled=this.model.automation.script.forced_triggerable
-                }}
-                class="triggerables"
-              />
-            </div>
-          </div>
-
-          {{#if this.automationForm.trigger}}
-            {{#if this.model.automation.trigger.doc}}
-              <div class="alert alert-info">
-                <p>{{this.model.automation.trigger.doc}}</p>
-              </div>
-            {{/if}}
-
-            {{#if
-              (and
-                this.model.automation.enabled
-                this.model.automation.trigger.settings.manual_trigger
-              )
-            }}
-              <div class="alert alert-info next-trigger">
-
-                {{#if this.nextPendingAutomationAtFormatted}}
-                  <p>
-                    {{i18n
-                      "discourse_automation.edit_automation.trigger_section.next_pending_automation"
-                      date=this.nextPendingAutomationAtFormatted
+                <div class="controls">
+                  <TextField
+                    @value={{@controller.automationForm.name}}
+                    @type="text"
+                    @autofocus={{true}}
+                    @name="automation-name"
+                    class="input-large"
+                    @input={{withEventValue
+                      (fn (mut @controller.automationForm.name))
                     }}
-                  </p>
-                {{/if}}
-
-                <DButton
-                  @label="discourse_automation.edit_automation.trigger_section.trigger_now"
-                  @isLoading={{this.isTriggeringAutomation}}
-                  @action={{fn
-                    this.onManualAutomationTrigger
-                    this.model.automation.id
-                  }}
-                  class="btn-primary trigger-now-btn"
-                />
+                  />
+                </div>
               </div>
-            {{/if}}
 
-            {{#each this.triggerFields as |field|}}
-              <AutomationField
-                @automation={{this.automation}}
-                @field={{field}}
-                @saveAutomation={{fn this.saveAutomation this.automation}}
-              />
-            {{/each}}
-          {{/if}}
-        </section>
+              <div class="control-group">
+                <label class="control-label">
+                  {{i18n "discourse_automation.models.script.name.label"}}
+                </label>
 
-        {{#if this.automationForm.trigger}}
-          {{#if this.scriptFields}}
-            <section class="fields-section form-section edit">
+                <div class="controls">
+                  <ComboBox
+                    @value={{@controller.automationForm.script}}
+                    @content={{@controller.model.scriptables}}
+                    @onChange={{@controller.onChangeScript}}
+                    @options={{hash filterable=true}}
+                    class="scriptables"
+                  />
+                </div>
+              </div>
+            </section>
+
+            <section class="trigger-section form-section edit">
               <h2 class="title">
                 {{i18n
-                  "discourse_automation.edit_automation.fields_section.title"
+                  "discourse_automation.edit_automation.trigger_section.title"
                 }}
               </h2>
 
-              {{#if this.model.automation.script.with_trigger_doc}}
-                <div class="alert alert-info">
-                  <p>{{this.model.automation.script.with_trigger_doc}}</p>
+              <div class="control-group">
+                {{#if @controller.model.automation.script.forced_triggerable}}
+                  <div class="alert alert-warning">
+                    {{i18n
+                      "discourse_automation.edit_automation.trigger_section.forced"
+                    }}
+                  </div>
+                {{/if}}
+
+                <label class="control-label">
+                  {{i18n "discourse_automation.models.trigger.name.label"}}
+                </label>
+
+                <div class="controls">
+                  <ComboBox
+                    @value={{@controller.automationForm.trigger}}
+                    @content={{@controller.model.triggerables}}
+                    @onChange={{@controller.onChangeTrigger}}
+                    @options={{hash
+                      filterable=true
+                      none="discourse_automation.select_trigger"
+                      disabled=@controller.model.automation.script.forced_triggerable
+                    }}
+                    class="triggerables"
+                  />
+                </div>
+              </div>
+
+              {{#if @controller.automationForm.trigger}}
+                {{#if @controller.model.automation.trigger.doc}}
+                  <div class="alert alert-info">
+                    <p>{{@controller.model.automation.trigger.doc}}</p>
+                  </div>
+                {{/if}}
+
+                {{#if
+                  (and
+                    @controller.model.automation.enabled
+                    @controller.model.automation.trigger.settings.manual_trigger
+                  )
+                }}
+                  <div class="alert alert-info next-trigger">
+
+                    {{#if @controller.nextPendingAutomationAtFormatted}}
+                      <p>
+                        {{i18n
+                          "discourse_automation.edit_automation.trigger_section.next_pending_automation"
+                          date=@controller.nextPendingAutomationAtFormatted
+                        }}
+                      </p>
+                    {{/if}}
+
+                    <DButton
+                      @label="discourse_automation.edit_automation.trigger_section.trigger_now"
+                      @isLoading={{@controller.isTriggeringAutomation}}
+                      @action={{fn
+                        @controller.onManualAutomationTrigger
+                        @controller.model.automation.id
+                      }}
+                      class="btn-primary trigger-now-btn"
+                    />
+                  </div>
+                {{/if}}
+
+                {{#each @controller.triggerFields as |field|}}
+                  <AutomationField
+                    @automation={{@controller.automation}}
+                    @field={{field}}
+                    @saveAutomation={{fn
+                      @controller.saveAutomation
+                      @controller.automation
+                    }}
+                  />
+                {{/each}}
+              {{/if}}
+            </section>
+
+            {{#if @controller.automationForm.trigger}}
+              {{#if @controller.scriptFields}}
+                <section class="fields-section form-section edit">
+                  <h2 class="title">
+                    {{i18n
+                      "discourse_automation.edit_automation.fields_section.title"
+                    }}
+                  </h2>
+
+                  {{#if @controller.model.automation.script.with_trigger_doc}}
+                    <div class="alert alert-info">
+                      <p
+                      >{{@controller.model.automation.script.with_trigger_doc}}</p>
+                    </div>
+                  {{/if}}
+
+                  <div class="control-group">
+                    {{#each @controller.scriptFields as |field|}}
+                      <AutomationField
+                        @automation={{@controller.automation}}
+                        @field={{field}}
+                        @saveAutomation={{fn
+                          @controller.saveAutomation
+                          @controller.automation
+                        }}
+                      />
+                    {{/each}}
+                  </div>
+                </section>
+              {{/if}}
+
+              {{#if @controller.automationForm.trigger}}
+                <div
+                  class="control-group automation-enabled alert
+                    {{if
+                      @controller.automationForm.enabled
+                      'alert-info'
+                      'alert-warning'
+                    }}"
+                >
+                  <span>{{i18n
+                      "discourse_automation.models.automation.enabled.label"
+                    }}</span>
+                  <Input
+                    @type="checkbox"
+                    @checked={{@controller.automationForm.enabled}}
+                    {{on
+                      "click"
+                      (action
+                        (mut @controller.automationForm.enabled)
+                        value="target.checked"
+                      )
+                    }}
+                  />
                 </div>
               {{/if}}
 
               <div class="control-group">
-                {{#each this.scriptFields as |field|}}
-                  <AutomationField
-                    @automation={{this.automation}}
-                    @field={{field}}
-                    @saveAutomation={{fn this.saveAutomation this.automation}}
-                  />
-                {{/each}}
+                <DButton
+                  @isLoading={{@controller.isUpdatingAutomation}}
+                  @label="discourse_automation.update"
+                  @type="submit"
+                  @action={{fn
+                    @controller.saveAutomation
+                    @controller.automation
+                    true
+                  }}
+                  class="btn-primary update-automation"
+                />
               </div>
-            </section>
-          {{/if}}
-
-          {{#if this.automationForm.trigger}}
-            <div
-              class="control-group automation-enabled alert
-                {{if this.automationForm.enabled 'alert-info' 'alert-warning'}}"
-            >
-              <span>{{i18n
-                  "discourse_automation.models.automation.enabled.label"
-                }}</span>
-              <Input
-                @type="checkbox"
-                @checked={{this.automationForm.enabled}}
-                {{on
-                  "click"
-                  (action
-                    (mut this.automationForm.enabled) value="target.checked"
-                  )
-                }}
-              />
-            </div>
-          {{/if}}
-
-          <div class="control-group">
-            <DButton
-              @isLoading={{this.isUpdatingAutomation}}
-              @label="discourse_automation.update"
-              @type="submit"
-              @action={{fn this.saveAutomation this.automation true}}
-              class="btn-primary update-automation"
-            />
-          </div>
-        {{/if}}
-      </form>
-    </:content>
-  </AdminConfigAreaCard>
-</div>
\ No newline at end of file
+            {{/if}}
+          </form>
+        </:content>
+      </AdminConfigAreaCard>
+    </div>
+  </template>
+);
diff --git a/plugins/automation/admin/assets/javascripts/discourse/templates/admin-plugins/show/automation/index.gjs b/plugins/automation/admin/assets/javascripts/discourse/templates/admin-plugins/show/automation/index.gjs
index 29533471818..10e81017374 100644
--- a/plugins/automation/admin/assets/javascripts/discourse/templates/admin-plugins/show/automation/index.gjs
+++ b/plugins/automation/admin/assets/javascripts/discourse/templates/admin-plugins/show/automation/index.gjs
@@ -1 +1,6 @@
-<AutomationList @model={{this.model}} />
\ No newline at end of file
+import RouteTemplate from "ember-route-template";
+import AutomationList from "discourse/plugins/automation/admin/components/automation-list";
+
+export default RouteTemplate(
+  <template><AutomationList @model={{@controller.model}} /></template>
+);
diff --git a/plugins/automation/admin/assets/javascripts/discourse/templates/admin-plugins/show/automation/new.gjs b/plugins/automation/admin/assets/javascripts/discourse/templates/admin-plugins/show/automation/new.gjs
index 6eeee90fce1..123d44766f9 100644
--- a/plugins/automation/admin/assets/javascripts/discourse/templates/admin-plugins/show/automation/new.gjs
+++ b/plugins/automation/admin/assets/javascripts/discourse/templates/admin-plugins/show/automation/new.gjs
@@ -1,27 +1,41 @@
-<div class="admin-detail discourse-automation-new discourse-automation-form">
-  <BackButton
-    @label="discourse_automation.back"
-    @route="adminPlugins.show.automation.index"
-    class="discourse-automation-back"
-  />
-  <AdminConfigAreaCard @heading="discourse_automation.select_script">
-    <:content>
-      <input
-        type="text"
-        placeholder={{i18n "discourse_automation.filter_placeholder"}}
-        {{on "input" this.updateFilterText}}
-        class="admin-section-landing__header-filter"
-      />
+import { fn } from "@ember/helper";
+import { on } from "@ember/modifier";
+import RouteTemplate from "ember-route-template";
+import BackButton from "discourse/components/back-button";
+import { i18n } from "discourse-i18n";
+import AdminConfigAreaCard from "admin/components/admin-config-area-card";
+import AdminSectionLandingItem from "admin/components/admin-section-landing-item";
 
-      <div class="admin-section-landing__wrapper">
-        {{#each this.scriptableContent as |script|}}
-          <AdminSectionLandingItem
-            {{on "click" (fn this.selectScriptToEdit script)}}
-            @titleLabelTranslated={{script.name}}
-            @descriptionLabelTranslated={{script.description}}
+export default RouteTemplate(
+  <template>
+    <div
+      class="admin-detail discourse-automation-new discourse-automation-form"
+    >
+      <BackButton
+        @label="discourse_automation.back"
+        @route="adminPlugins.show.automation.index"
+        class="discourse-automation-back"
+      />
+      <AdminConfigAreaCard @heading="discourse_automation.select_script">
+        <:content>
+          <input
+            type="text"
+            placeholder={{i18n "discourse_automation.filter_placeholder"}}
+            {{on "input" @controller.updateFilterText}}
+            class="admin-section-landing__header-filter"
           />
-        {{/each}}
-      </div>
-    </:content>
-  </AdminConfigAreaCard>
-</div>
\ No newline at end of file
+
+          <div class="admin-section-landing__wrapper">
+            {{#each @controller.scriptableContent as |script|}}
+              <AdminSectionLandingItem
+                {{on "click" (fn @controller.selectScriptToEdit script)}}
+                @titleLabelTranslated={{script.name}}
+                @descriptionLabelTranslated={{script.description}}
+              />
+            {{/each}}
+          </div>
+        </:content>
+      </AdminConfigAreaCard>
+    </div>
+  </template>
+);
diff --git a/plugins/automation/test/javascripts/integration/components/da-boolean-field-test.gjs b/plugins/automation/test/javascripts/integration/components/da-boolean-field-test.gjs
index e963d740411..e841eba2004 100644
--- a/plugins/automation/test/javascripts/integration/components/da-boolean-field-test.gjs
+++ b/plugins/automation/test/javascripts/integration/components/da-boolean-field-test.gjs
@@ -1,8 +1,8 @@
 import { getOwner } from "@ember/owner";
 import { click, render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import AutomationField from "discourse/plugins/automation/admin/components/automation-field";
 import AutomationFabricators from "discourse/plugins/automation/admin/lib/fabricators";
 
 module("Integration | Component | da-boolean-field", function (hooks) {
@@ -13,10 +13,17 @@ module("Integration | Component | da-boolean-field", function (hooks) {
   });
 
   test("set value", async function (assert) {
+    const self = this;
+
     this.field = new AutomationFabricators(getOwner(this)).field();
 
     await render(
-      hbs`<AutomationField @automation={{this.automation}} @field={{this.field}} />`
+      <template>
+        <AutomationField
+          @automation={{self.automation}}
+          @field={{self.field}}
+        />
+      </template>
     );
     await click("input");
 
diff --git a/plugins/automation/test/javascripts/integration/components/da-categories-field-test.gjs b/plugins/automation/test/javascripts/integration/components/da-categories-field-test.gjs
index 521010b4553..e5246f3dea2 100644
--- a/plugins/automation/test/javascripts/integration/components/da-categories-field-test.gjs
+++ b/plugins/automation/test/javascripts/integration/components/da-categories-field-test.gjs
@@ -1,9 +1,9 @@
 import { getOwner } from "@ember/owner";
 import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
+import AutomationField from "discourse/plugins/automation/admin/components/automation-field";
 import AutomationFabricators from "discourse/plugins/automation/admin/lib/fabricators";
 
 module("Integration | Component | da-categories-field", function (hooks) {
@@ -14,12 +14,19 @@ module("Integration | Component | da-categories-field", function (hooks) {
   });
 
   test("sets values", async function (assert) {
+    const self = this;
+
     this.field = new AutomationFabricators(getOwner(this)).field({
       component: "categories",
     });
 
     await render(
-      hbs`<AutomationField @automation={{this.automation}} @field={{this.field}} />`
+      <template>
+        <AutomationField
+          @automation={{self.automation}}
+          @field={{self.field}}
+        />
+      </template>
     );
 
     await selectKit().expand();
diff --git a/plugins/automation/test/javascripts/integration/components/da-category-field-test.gjs b/plugins/automation/test/javascripts/integration/components/da-category-field-test.gjs
index d0ce9bee65d..b60199f46f0 100644
--- a/plugins/automation/test/javascripts/integration/components/da-category-field-test.gjs
+++ b/plugins/automation/test/javascripts/integration/components/da-category-field-test.gjs
@@ -1,9 +1,9 @@
 import { getOwner } from "@ember/owner";
 import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
+import AutomationField from "discourse/plugins/automation/admin/components/automation-field";
 import AutomationFabricators from "discourse/plugins/automation/admin/lib/fabricators";
 
 module("Integration | Component | da-category-field", function (hooks) {
@@ -14,12 +14,19 @@ module("Integration | Component | da-category-field", function (hooks) {
   });
 
   test("set value", async function (assert) {
+    const self = this;
+
     this.field = new AutomationFabricators(getOwner(this)).field({
       component: "category",
     });
 
     await render(
-      hbs`<AutomationField @automation={{this.automation}} @field={{this.field}} />`
+      <template>
+        <AutomationField
+          @automation={{self.automation}}
+          @field={{self.field}}
+        />
+      </template>
     );
 
     await selectKit().expand();
diff --git a/plugins/automation/test/javascripts/integration/components/da-category-notification-level-field-test.gjs b/plugins/automation/test/javascripts/integration/components/da-category-notification-level-field-test.gjs
index 1447c2681d7..8b6bf33f5ad 100644
--- a/plugins/automation/test/javascripts/integration/components/da-category-notification-level-field-test.gjs
+++ b/plugins/automation/test/javascripts/integration/components/da-category-notification-level-field-test.gjs
@@ -1,9 +1,9 @@
 import { getOwner } from "@ember/owner";
 import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import notificationsTracking from "discourse/tests/helpers/notifications-tracking-helper";
+import AutomationField from "discourse/plugins/automation/admin/components/automation-field";
 import AutomationFabricators from "discourse/plugins/automation/admin/lib/fabricators";
 
 module(
@@ -16,12 +16,19 @@ module(
     });
 
     test("set value", async function (assert) {
+      const self = this;
+
       this.field = new AutomationFabricators(getOwner(this)).field({
         component: "category_notification_level",
       });
 
       await render(
-        hbs`<AutomationField @automation={{this.automation}} @field={{this.field}} />`
+        <template>
+          <AutomationField
+            @automation={{self.automation}}
+            @field={{self.field}}
+          />
+        </template>
       );
       await notificationsTracking().selectLevelId(2);
 
diff --git a/plugins/automation/test/javascripts/integration/components/da-choices-field-test.gjs b/plugins/automation/test/javascripts/integration/components/da-choices-field-test.gjs
index 3062136d6ab..6925fa6ed88 100644
--- a/plugins/automation/test/javascripts/integration/components/da-choices-field-test.gjs
+++ b/plugins/automation/test/javascripts/integration/components/da-choices-field-test.gjs
@@ -1,9 +1,9 @@
 import { getOwner } from "@ember/owner";
 import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
+import AutomationField from "discourse/plugins/automation/admin/components/automation-field";
 import AutomationFabricators from "discourse/plugins/automation/admin/lib/fabricators";
 
 module("Integration | Component | da-choices-field", function (hooks) {
@@ -14,13 +14,20 @@ module("Integration | Component | da-choices-field", function (hooks) {
   });
 
   test("set value", async function (assert) {
+    const self = this;
+
     this.field = new AutomationFabricators(getOwner(this)).field({
       component: "choices",
       extra: { content: [{ name: "One", id: 1 }] },
     });
 
     await render(
-      hbs` <AutomationField @automation={{this.automation}} @field={{this.field}} />`
+      <template>
+        <AutomationField
+          @automation={{self.automation}}
+          @field={{self.field}}
+        />
+      </template>
     );
 
     await selectKit().expand();
diff --git a/plugins/automation/test/javascripts/integration/components/da-custom-field-test.gjs b/plugins/automation/test/javascripts/integration/components/da-custom-field-test.gjs
index c470e4f1d62..f1ced1f5997 100644
--- a/plugins/automation/test/javascripts/integration/components/da-custom-field-test.gjs
+++ b/plugins/automation/test/javascripts/integration/components/da-custom-field-test.gjs
@@ -1,10 +1,10 @@
 import { getOwner } from "@ember/owner";
 import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import pretender, { response } from "discourse/tests/helpers/create-pretender";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
+import AutomationField from "discourse/plugins/automation/admin/components/automation-field";
 import AutomationFabricators from "discourse/plugins/automation/admin/lib/fabricators";
 
 module("Integration | Component | da-custom-field", function (hooks) {
@@ -34,12 +34,19 @@ module("Integration | Component | da-custom-field", function (hooks) {
   });
 
   test("set value", async function (assert) {
+    const self = this;
+
     this.field = new AutomationFabricators(getOwner(this)).field({
       component: "custom_field",
     });
 
     await render(
-      hbs`<AutomationField @automation={{this.automation}} @field={{this.field}} />`
+      <template>
+        <AutomationField
+          @automation={{self.automation}}
+          @field={{self.field}}
+        />
+      </template>
     );
 
     await selectKit().expand();
diff --git a/plugins/automation/test/javascripts/integration/components/da-date-time-field-test.gjs b/plugins/automation/test/javascripts/integration/components/da-date-time-field-test.gjs
index c6910064dad..a711d377fec 100644
--- a/plugins/automation/test/javascripts/integration/components/da-date-time-field-test.gjs
+++ b/plugins/automation/test/javascripts/integration/components/da-date-time-field-test.gjs
@@ -1,8 +1,8 @@
 import { getOwner } from "@ember/owner";
 import { fillIn, render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import AutomationField from "discourse/plugins/automation/admin/components/automation-field";
 import AutomationFabricators from "discourse/plugins/automation/admin/lib/fabricators";
 
 module("Integration | Component | da-date-time-field", function (hooks) {
@@ -13,12 +13,19 @@ module("Integration | Component | da-date-time-field", function (hooks) {
   });
 
   test("set value", async function (assert) {
+    const self = this;
+
     this.field = new AutomationFabricators(getOwner(this)).field({
       component: "date_time",
     });
 
     await render(
-      hbs`<AutomationField @automation={{this.automation}} @field={{this.field}} />`
+      <template>
+        <AutomationField
+          @automation={{self.automation}}
+          @field={{self.field}}
+        />
+      </template>
     );
     await fillIn("input", "2023-10-03T12:34");
 
diff --git a/plugins/automation/test/javascripts/integration/components/da-email-group-user-field-test.gjs b/plugins/automation/test/javascripts/integration/components/da-email-group-user-field-test.gjs
index d082e3a79c4..cd714cf5b86 100644
--- a/plugins/automation/test/javascripts/integration/components/da-email-group-user-field-test.gjs
+++ b/plugins/automation/test/javascripts/integration/components/da-email-group-user-field-test.gjs
@@ -1,13 +1,15 @@
 import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import DaEmailGroupUserField from "discourse/plugins/automation/admin/components/fields/da-email-group-user-field";
 
 module("Integration | Component | email-group-user-field", function (hooks) {
   setupRenderingTest(hooks);
 
   test("Email group user field uses email-group-user-chooser component", async function (assert) {
-    const template = hbs` <Fields::DaEmailGroupUserField @label="a label" />`;
+    const template = <template>
+      <DaEmailGroupUserField @label="a label" />
+    </template>;
 
     await render(template);
 
diff --git a/plugins/automation/test/javascripts/integration/components/da-group-field-test.gjs b/plugins/automation/test/javascripts/integration/components/da-group-field-test.gjs
index 6d301503126..5e5734d9dd2 100644
--- a/plugins/automation/test/javascripts/integration/components/da-group-field-test.gjs
+++ b/plugins/automation/test/javascripts/integration/components/da-group-field-test.gjs
@@ -1,10 +1,10 @@
 import { getOwner } from "@ember/owner";
 import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import pretender, { response } from "discourse/tests/helpers/create-pretender";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
+import AutomationField from "discourse/plugins/automation/admin/components/automation-field";
 import AutomationFabricators from "discourse/plugins/automation/admin/lib/fabricators";
 
 module("Integration | Component | da-group-field", function (hooks) {
@@ -27,12 +27,19 @@ module("Integration | Component | da-group-field", function (hooks) {
   });
 
   test("set value", async function (assert) {
+    const self = this;
+
     this.field = new AutomationFabricators(getOwner(this)).field({
       component: "group",
     });
 
     await render(
-      hbs`<AutomationField @automation={{this.automation}} @field={{this.field}} />`
+      <template>
+        <AutomationField
+          @automation={{self.automation}}
+          @field={{self.field}}
+        />
+      </template>
     );
 
     await selectKit().expand();
diff --git a/plugins/automation/test/javascripts/integration/components/da-groups-field-test.gjs b/plugins/automation/test/javascripts/integration/components/da-groups-field-test.gjs
index 07fd87fcde3..40ca1621a31 100644
--- a/plugins/automation/test/javascripts/integration/components/da-groups-field-test.gjs
+++ b/plugins/automation/test/javascripts/integration/components/da-groups-field-test.gjs
@@ -1,10 +1,10 @@
 import { getOwner } from "@ember/owner";
 import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import pretender, { response } from "discourse/tests/helpers/create-pretender";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
+import AutomationField from "discourse/plugins/automation/admin/components/automation-field";
 import AutomationFabricators from "discourse/plugins/automation/admin/lib/fabricators";
 
 module("Integration | Component | da-groups-field", function (hooks) {
@@ -34,12 +34,19 @@ module("Integration | Component | da-groups-field", function (hooks) {
   });
 
   test("set value", async function (assert) {
+    const self = this;
+
     this.field = new AutomationFabricators(getOwner(this)).field({
       component: "groups",
     });
 
     await render(
-      hbs`<AutomationField @automation={{this.automation}} @field={{this.field}} />`
+      <template>
+        <AutomationField
+          @automation={{self.automation}}
+          @field={{self.field}}
+        />
+      </template>
     );
 
     await selectKit().expand();
@@ -49,13 +56,20 @@ module("Integration | Component | da-groups-field", function (hooks) {
   });
 
   test("supports a maxmimum value", async function (assert) {
+    const self = this;
+
     this.field = new AutomationFabricators(getOwner(this)).field({
       component: "groups",
       extra: { maximum: 1 },
     });
 
     await render(
-      hbs`<AutomationField @automation={{this.automation}} @field={{this.field}} />`
+      <template>
+        <AutomationField
+          @automation={{self.automation}}
+          @field={{self.field}}
+        />
+      </template>
     );
 
     await selectKit().expand();
diff --git a/plugins/automation/test/javascripts/integration/components/da-message-field-test.gjs b/plugins/automation/test/javascripts/integration/components/da-message-field-test.gjs
index ad655dffde9..5cf9a2dcc54 100644
--- a/plugins/automation/test/javascripts/integration/components/da-message-field-test.gjs
+++ b/plugins/automation/test/javascripts/integration/components/da-message-field-test.gjs
@@ -1,8 +1,8 @@
 import { getOwner } from "@ember/owner";
 import { fillIn, render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import AutomationField from "discourse/plugins/automation/admin/components/automation-field";
 import AutomationFabricators from "discourse/plugins/automation/admin/lib/fabricators";
 
 module("Integration | Component | da-message-field", function (hooks) {
@@ -13,12 +13,19 @@ module("Integration | Component | da-message-field", function (hooks) {
   });
 
   test("set value", async function (assert) {
+    const self = this;
+
     this.field = new AutomationFabricators(getOwner(this)).field({
       component: "message",
     });
 
     await render(
-      hbs`<AutomationField @automation={{this.automation}} @field={{this.field}} />`
+      <template>
+        <AutomationField
+          @automation={{self.automation}}
+          @field={{self.field}}
+        />
+      </template>
     );
     await fillIn("textarea", "Hello World");
 
@@ -26,13 +33,20 @@ module("Integration | Component | da-message-field", function (hooks) {
   });
 
   test("render placeholders", async function (assert) {
+    const self = this;
+
     this.field = new AutomationFabricators(getOwner(this)).field({
       component: "message",
     });
     this.automation.placeholders = ["foo", "bar"];
 
     await render(
-      hbs`<AutomationField @automation={{this.automation}} @field={{this.field}}  />`
+      <template>
+        <AutomationField
+          @automation={{self.automation}}
+          @field={{self.field}}
+        />
+      </template>
     );
 
     assert.dom(".placeholders-list").hasText("foo bar");
diff --git a/plugins/automation/test/javascripts/integration/components/da-pms-field-test.gjs b/plugins/automation/test/javascripts/integration/components/da-pms-field-test.gjs
index 7c3c997862b..dca35d6f316 100644
--- a/plugins/automation/test/javascripts/integration/components/da-pms-field-test.gjs
+++ b/plugins/automation/test/javascripts/integration/components/da-pms-field-test.gjs
@@ -1,8 +1,8 @@
 import { getOwner } from "@ember/owner";
 import { click, fillIn, render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import AutomationField from "discourse/plugins/automation/admin/components/automation-field";
 import AutomationFabricators from "discourse/plugins/automation/admin/lib/fabricators";
 
 module("Integration | Component | da-pms-field", function (hooks) {
@@ -13,12 +13,19 @@ module("Integration | Component | da-pms-field", function (hooks) {
   });
 
   test("set value", async function (assert) {
+    const self = this;
+
     this.field = new AutomationFabricators(getOwner(this)).field({
       component: "pms",
     });
 
     await render(
-      hbs`<AutomationField @automation={{this.automation}} @field={{this.field}} />`
+      <template>
+        <AutomationField
+          @automation={{self.automation}}
+          @field={{self.field}}
+        />
+      </template>
     );
 
     await click(".insert-pm");
diff --git a/plugins/automation/test/javascripts/integration/components/da-post-field-test.gjs b/plugins/automation/test/javascripts/integration/components/da-post-field-test.gjs
index 07921da0515..f87a8f85bd5 100644
--- a/plugins/automation/test/javascripts/integration/components/da-post-field-test.gjs
+++ b/plugins/automation/test/javascripts/integration/components/da-post-field-test.gjs
@@ -1,8 +1,8 @@
 import { getOwner } from "@ember/owner";
 import { fillIn, render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import AutomationField from "discourse/plugins/automation/admin/components/automation-field";
 import AutomationFabricators from "discourse/plugins/automation/admin/lib/fabricators";
 
 module("Integration | Component | da-post-field", function (hooks) {
@@ -13,12 +13,19 @@ module("Integration | Component | da-post-field", function (hooks) {
   });
 
   test("set value", async function (assert) {
+    const self = this;
+
     this.field = new AutomationFabricators(getOwner(this)).field({
       component: "post",
     });
 
     await render(
-      hbs`<AutomationField @automation={{this.automation}} @field={{this.field}} />`
+      <template>
+        <AutomationField
+          @automation={{self.automation}}
+          @field={{self.field}}
+        />
+      </template>
     );
     await fillIn("textarea", "Hello World");
 
diff --git a/plugins/automation/test/javascripts/integration/components/da-tags-field-test.gjs b/plugins/automation/test/javascripts/integration/components/da-tags-field-test.gjs
index 630d587d348..a47aaa09089 100644
--- a/plugins/automation/test/javascripts/integration/components/da-tags-field-test.gjs
+++ b/plugins/automation/test/javascripts/integration/components/da-tags-field-test.gjs
@@ -1,9 +1,9 @@
 import { getOwner } from "@ember/owner";
 import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
+import AutomationField from "discourse/plugins/automation/admin/components/automation-field";
 import AutomationFabricators from "discourse/plugins/automation/admin/lib/fabricators";
 
 module("Integration | Component | da-tags-field", function (hooks) {
@@ -14,12 +14,19 @@ module("Integration | Component | da-tags-field", function (hooks) {
   });
 
   test("set value", async function (assert) {
+    const self = this;
+
     this.field = new AutomationFabricators(getOwner(this)).field({
       component: "tags",
     });
 
     await render(
-      hbs`<AutomationField @automation={{this.automation}} @field={{this.field}} />`
+      <template>
+        <AutomationField
+          @automation={{self.automation}}
+          @field={{self.field}}
+        />
+      </template>
     );
 
     await selectKit().expand();
diff --git a/plugins/automation/test/javascripts/integration/components/da-text-field-test.gjs b/plugins/automation/test/javascripts/integration/components/da-text-field-test.gjs
index 32c7998daf7..e0635cb21a9 100644
--- a/plugins/automation/test/javascripts/integration/components/da-text-field-test.gjs
+++ b/plugins/automation/test/javascripts/integration/components/da-text-field-test.gjs
@@ -1,8 +1,8 @@
 import { getOwner } from "@ember/owner";
 import { fillIn, render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import AutomationField from "discourse/plugins/automation/admin/components/automation-field";
 import AutomationFabricators from "discourse/plugins/automation/admin/lib/fabricators";
 
 module("Integration | Component | da-text-field", function (hooks) {
@@ -13,12 +13,19 @@ module("Integration | Component | da-text-field", function (hooks) {
   });
 
   test("set value", async function (assert) {
+    const self = this;
+
     this.field = new AutomationFabricators(getOwner(this)).field({
       component: "text",
     });
 
     await render(
-      hbs`<AutomationField @automation={{this.automation}} @field={{this.field}} />`
+      <template>
+        <AutomationField
+          @automation={{self.automation}}
+          @field={{self.field}}
+        />
+      </template>
     );
     await fillIn("input", "Hello World");
 
diff --git a/plugins/automation/test/javascripts/integration/components/da-text-list-field-test.gjs b/plugins/automation/test/javascripts/integration/components/da-text-list-field-test.gjs
index 4ee50f5aa28..46891730770 100644
--- a/plugins/automation/test/javascripts/integration/components/da-text-list-field-test.gjs
+++ b/plugins/automation/test/javascripts/integration/components/da-text-list-field-test.gjs
@@ -1,9 +1,9 @@
 import { getOwner } from "@ember/owner";
 import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
+import AutomationField from "discourse/plugins/automation/admin/components/automation-field";
 import AutomationFabricators from "discourse/plugins/automation/admin/lib/fabricators";
 
 module("Integration | Component | da-text-list-field", function (hooks) {
@@ -14,12 +14,19 @@ module("Integration | Component | da-text-list-field", function (hooks) {
   });
 
   test("set value", async function (assert) {
+    const self = this;
+
     this.field = new AutomationFabricators(getOwner(this)).field({
       component: "text_list",
     });
 
     await render(
-      hbs`<AutomationField @automation={{this.automation}} @field={{this.field}} />`
+      <template>
+        <AutomationField
+          @automation={{self.automation}}
+          @field={{self.field}}
+        />
+      </template>
     );
     await selectKit().expand();
     await selectKit().fillInFilter("test");
diff --git a/plugins/automation/test/javascripts/integration/components/da-trust-levels-field-test.gjs b/plugins/automation/test/javascripts/integration/components/da-trust-levels-field-test.gjs
index a8c18e72e51..c75cf7794b6 100644
--- a/plugins/automation/test/javascripts/integration/components/da-trust-levels-field-test.gjs
+++ b/plugins/automation/test/javascripts/integration/components/da-trust-levels-field-test.gjs
@@ -1,9 +1,9 @@
 import { getOwner } from "@ember/owner";
 import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
+import AutomationField from "discourse/plugins/automation/admin/components/automation-field";
 import AutomationFabricators from "discourse/plugins/automation/admin/lib/fabricators";
 
 module("Integration | Component | da-trust-levels-field", function (hooks) {
@@ -14,12 +14,19 @@ module("Integration | Component | da-trust-levels-field", function (hooks) {
   });
 
   test("set value", async function (assert) {
+    const self = this;
+
     this.field = new AutomationFabricators(getOwner(this)).field({
       component: "trust-levels",
     });
 
     await render(
-      hbs`<AutomationField @automation={{this.automation}} @field={{this.field}} />`
+      <template>
+        <AutomationField
+          @automation={{self.automation}}
+          @field={{self.field}}
+        />
+      </template>
     );
 
     await selectKit().expand();
diff --git a/plugins/automation/test/javascripts/integration/components/da-user-field-test.gjs b/plugins/automation/test/javascripts/integration/components/da-user-field-test.gjs
index 26a347aa9d9..ee1f3a2484c 100644
--- a/plugins/automation/test/javascripts/integration/components/da-user-field-test.gjs
+++ b/plugins/automation/test/javascripts/integration/components/da-user-field-test.gjs
@@ -1,10 +1,10 @@
 import { getOwner } from "@ember/owner";
 import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import pretender, { response } from "discourse/tests/helpers/create-pretender";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
+import AutomationField from "discourse/plugins/automation/admin/components/automation-field";
 import AutomationFabricators from "discourse/plugins/automation/admin/lib/fabricators";
 
 module("Integration | Component | da-user-field", function (hooks) {
@@ -27,12 +27,19 @@ module("Integration | Component | da-user-field", function (hooks) {
   });
 
   test("set value", async function (assert) {
+    const self = this;
+
     this.field = new AutomationFabricators(getOwner(this)).field({
       component: "user",
     });
 
     await render(
-      hbs`<AutomationField @automation={{this.automation}} @field={{this.field}} />`
+      <template>
+        <AutomationField
+          @automation={{self.automation}}
+          @field={{self.field}}
+        />
+      </template>
     );
 
     await selectKit().expand();
diff --git a/plugins/automation/test/javascripts/integration/components/da-users-field-test.gjs b/plugins/automation/test/javascripts/integration/components/da-users-field-test.gjs
index e4e379340c1..83060613305 100644
--- a/plugins/automation/test/javascripts/integration/components/da-users-field-test.gjs
+++ b/plugins/automation/test/javascripts/integration/components/da-users-field-test.gjs
@@ -1,10 +1,10 @@
 import { getOwner } from "@ember/owner";
 import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import pretender, { response } from "discourse/tests/helpers/create-pretender";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
+import AutomationField from "discourse/plugins/automation/admin/components/automation-field";
 import AutomationFabricators from "discourse/plugins/automation/admin/lib/fabricators";
 
 module("Integration | Component | da-users-field", function (hooks) {
@@ -32,12 +32,19 @@ module("Integration | Component | da-users-field", function (hooks) {
   });
 
   test("sets values", async function (assert) {
+    const self = this;
+
     this.field = new AutomationFabricators(getOwner(this)).field({
       component: "users",
     });
 
     await render(
-      hbs`<AutomationField @automation={{this.automation}} @field={{this.field}} />`
+      <template>
+        <AutomationField
+          @automation={{self.automation}}
+          @field={{self.field}}
+        />
+      </template>
     );
 
     await selectKit().expand();
@@ -50,12 +57,19 @@ module("Integration | Component | da-users-field", function (hooks) {
   });
 
   test("allows emails", async function (assert) {
+    const self = this;
+
     this.field = new AutomationFabricators(getOwner(this)).field({
       component: "users",
     });
 
     await render(
-      hbs`<AutomationField @automation={{this.automation}} @field={{this.field}} />`
+      <template>
+        <AutomationField
+          @automation={{self.automation}}
+          @field={{self.field}}
+        />
+      </template>
     );
 
     await selectKit().expand();
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer-message-details.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer-message-details.gjs
index 273daa2e810..7a4e98e909c 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer-message-details.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer-message-details.gjs
@@ -3,8 +3,24 @@ import { cached } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { getOwner } from "@ember/owner";
 import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import { optionalRequire } from "discourse/lib/utilities";
+import ChatComposerMessageDetails from "discourse/plugins/chat/discourse/components/chat-composer-message-details";
 import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
+const StyleguideComponent = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/component"
+);
+const Controls = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/controls"
+);
+const Row = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/controls/row"
+);
+const StyleguideExample = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide-example"
+);
+
 export default class ChatStyleguideChatComposerMessageDetails extends Component {
   @service site;
   @service session;
@@ -28,20 +44,22 @@ export default class ChatStyleguideChatComposerMessageDetails extends Component
       this.message.inReplyTo = null;
     }
   }
+
+  <template>
+    <StyleguideExample @title="<ChatComposerMessageDetails>">
+      <StyleguideComponent>
+        <ChatComposerMessageDetails @message={{this.message}} />
+      </StyleguideComponent>
+
+      <Controls>
+        <Row @name="Mode">
+          {{#if this.message.editing}}
+            <DButton @action={{this.toggleMode}} @translatedLabel="Reply" />
+          {{else}}
+            <DButton @action={{this.toggleMode}} @translatedLabel="Editing" />
+          {{/if}}
+        </Row>
+      </Controls>
+    </StyleguideExample>
+  </template>
 }
-
-<StyleguideExample @title="<ChatComposerMessageDetails>">
-  <Styleguide::Component>
-    <ChatComposerMessageDetails @message={{this.message}} />
-  </Styleguide::Component>
-
-  <Styleguide::Controls>
-    <Styleguide::Controls::Row @name="Mode">
-      {{#if this.message.editing}}
-        <DButton @action={{this.toggleMode}} @translatedLabel="Reply" />
-      {{else}}
-        <DButton @action={{this.toggleMode}} @translatedLabel="Editing" />
-      {{/if}}
-    </Styleguide::Controls::Row>
-  </Styleguide::Controls>
-</StyleguideExample>
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer.gjs
index 4ab221a6b2e..b7547c08625 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer.gjs
@@ -1,10 +1,27 @@
 import Component from "@glimmer/component";
+import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { getOwner } from "@ember/owner";
 import { service } from "@ember/service";
+import DToggleSwitch from "discourse/components/d-toggle-switch";
+import { optionalRequire } from "discourse/lib/utilities";
+import Channel from "discourse/plugins/chat/discourse/components/chat/composer/channel";
 import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 import { CHANNEL_STATUSES } from "discourse/plugins/chat/discourse/models/chat-channel";
 
+const StyleguideComponent = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/component"
+);
+const Controls = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/controls"
+);
+const Row = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/controls/row"
+);
+const StyleguideExample = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide-example"
+);
+
 export default class ChatStyleguideChatComposer extends Component {
   @service chatChannelComposer;
   @service chatChannelPane;
@@ -29,28 +46,30 @@ export default class ChatStyleguideChatComposer extends Component {
   onSendMessage() {
     this.chatChannelComposer.reset();
   }
+
+  <template>
+    <StyleguideExample @title="<ChatComposer>">
+      <StyleguideComponent>
+        <Channel
+          @channel={{this.channel}}
+          @onSendMessage={{this.onSendMessage}}
+        />
+      </StyleguideComponent>
+
+      <Controls>
+        <Row @name="Disabled">
+          <DToggleSwitch
+            @state={{this.channel.isReadOnly}}
+            {{on "click" this.toggleDisabled}}
+          />
+        </Row>
+        <Row @name="Sending">
+          <DToggleSwitch
+            @state={{this.chatChannelPane.sending}}
+            {{on "click" this.toggleSending}}
+          />
+        </Row>
+      </Controls>
+    </StyleguideExample>
+  </template>
 }
-
-<StyleguideExample @title="<ChatComposer>">
-  <Styleguide::Component>
-    <Chat::Composer::Channel
-      @channel={{this.channel}}
-      @onSendMessage={{this.onSendMessage}}
-    />
-  </Styleguide::Component>
-
-  <Styleguide::Controls>
-    <Styleguide::Controls::Row @name="Disabled">
-      <DToggleSwitch
-        @state={{this.channel.isReadOnly}}
-        {{on "click" this.toggleDisabled}}
-      />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="Sending">
-      <DToggleSwitch
-        @state={{this.chatChannelPane.sending}}
-        {{on "click" this.toggleSending}}
-      />
-    </Styleguide::Controls::Row>
-  </Styleguide::Controls>
-</StyleguideExample>
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-header-icon.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-header-icon.gjs
index 9badd7068be..a7c91378a60 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-header-icon.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-header-icon.gjs
@@ -1,6 +1,11 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
+import { on } from "@ember/modifier";
 import { action } from "@ember/object";
+import DToggleSwitch from "discourse/components/d-toggle-switch";
+import { optionalRequire } from "discourse/lib/utilities";
+import ComboBox from "select-kit/components/combo-box";
+import Icon from "discourse/plugins/chat/discourse/components/chat/header/icon";
 import {
   HEADER_INDICATOR_PREFERENCE_ALL_NEW,
   HEADER_INDICATOR_PREFERENCE_DM_AND_MENTIONS,
@@ -8,6 +13,19 @@ import {
   HEADER_INDICATOR_PREFERENCE_ONLY_MENTIONS,
 } from "discourse/plugins/chat/discourse/controllers/preferences-chat";
 
+const StyleguideComponent = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/component"
+);
+const Controls = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/controls"
+);
+const Row = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/controls/row"
+);
+const StyleguideExample = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide-example"
+);
+
 export default class ChatStyleguideChatHeaderIcon extends Component {
   @tracked isActive = false;
   @tracked currentUserInDnD = false;
@@ -48,64 +66,66 @@ export default class ChatStyleguideChatHeaderIcon extends Component {
   updateIndicatorPreference(value) {
     this.indicatorPreference = value;
   }
-}
 
-<StyleguideExample @title="<Chat::Header::Icon>">
-  <Styleguide::Component>
-    <header
-      class="d-header"
-      style="display: flex; align-items: center; justify-content: center;"
-    >
-      <ul class="d-header-icons">
-        <li class="header-dropdown-toggle chat-header-icon">
-          <Chat::Header::Icon
-            @isActive={{this.isActive}}
-            @currentUserInDnD={{this.currentUserInDnD}}
-            @unreadCount={{this.unreadCount}}
-            @urgentCount={{this.urgentCount}}
-            @indicatorPreference={{this.indicatorPreference}}
+  <template>
+    <StyleguideExample @title="<Chat::Header::Icon>">
+      <StyleguideComponent>
+        <header
+          class="d-header"
+          style="display: flex; align-items: center; justify-content: center;"
+        >
+          <ul class="d-header-icons">
+            <li class="header-dropdown-toggle chat-header-icon">
+              <Icon
+                @isActive={{this.isActive}}
+                @currentUserInDnD={{this.currentUserInDnD}}
+                @unreadCount={{this.unreadCount}}
+                @urgentCount={{this.urgentCount}}
+                @indicatorPreference={{this.indicatorPreference}}
+              />
+            </li>
+          </ul>
+        </header>
+      </StyleguideComponent>
+
+      <Controls>
+        <Row @name="isActive">
+          <DToggleSwitch
+            @state={{this.isActive}}
+            {{on "click" this.toggleIsActive}}
           />
-        </li>
-      </ul>
-    </header>
-  </Styleguide::Component>
+        </Row>
+        <Row @name="currentUserInDnD">
+          <DToggleSwitch
+            @state={{this.currentUserInDnD}}
+            {{on "click" this.toggleCurrentUserInDnD}}
+          />
+        </Row>
+      </Controls>
+      <Row @name="Unread count">
+        <input
+          type="number"
+          {{on "input" this.updateUnreadCount}}
+          value={{this.unreadCount}}
+        />
+      </Row>
+      <Row @name="Urgent count">
+        <input
+          type="number"
+          {{on "input" this.updateUrgentCount}}
+          value={{this.urgentCount}}
+        />
+      </Row>
+      <Row @name="Indicator preference">
+        <ComboBox
+          @value={{this.indicatorPreference}}
+          @content={{this.indicatorPreferences}}
+          @onChange={{this.updateIndicatorPreference}}
+          @valueProperty={{null}}
+          @nameProperty={{null}}
+        />
 
-  <Styleguide::Controls>
-    <Styleguide::Controls::Row @name="isActive">
-      <DToggleSwitch
-        @state={{this.isActive}}
-        {{on "click" this.toggleIsActive}}
-      />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="currentUserInDnD">
-      <DToggleSwitch
-        @state={{this.currentUserInDnD}}
-        {{on "click" this.toggleCurrentUserInDnD}}
-      />
-    </Styleguide::Controls::Row>
-  </Styleguide::Controls>
-  <Styleguide::Controls::Row @name="Unread count">
-    <input
-      type="number"
-      {{on "input" this.updateUnreadCount}}
-      value={{this.unreadCount}}
-    />
-  </Styleguide::Controls::Row>
-  <Styleguide::Controls::Row @name="Urgent count">
-    <input
-      type="number"
-      {{on "input" this.updateUrgentCount}}
-      value={{this.urgentCount}}
-    />
-  </Styleguide::Controls::Row>
-  <Styleguide::Controls::Row @name="Indicator preference">
-    <ComboBox
-      @value={{this.indicatorPreference}}
-      @content={{this.indicatorPreferences}}
-      @onChange={{this.updateIndicatorPreference}}
-      @valueProperty={{null}}
-      @nameProperty={{null}}
-    />
-
-  </Styleguide::Controls::Row>
-</StyleguideExample>
\ No newline at end of file
+      </Row>
+    </StyleguideExample>
+  </template>
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-message.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-message.gjs
index 09020a31f0f..826ca6ba8b8 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-message.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-message.gjs
@@ -1,10 +1,28 @@
 import Component from "@glimmer/component";
+import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { getOwner } from "@ember/owner";
 import { service } from "@ember/service";
+import { not } from "truth-helpers";
+import DToggleSwitch from "discourse/components/d-toggle-switch";
+import { optionalRequire } from "discourse/lib/utilities";
+import ChatMessage from "discourse/plugins/chat/discourse/components/chat-message";
 import ChatMessagesManager from "discourse/plugins/chat/discourse/lib/chat-messages-manager";
 import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
+const StyleguideComponent = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/component"
+);
+const Controls = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/controls"
+);
+const Row = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/controls/row"
+);
+const StyleguideExample = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide-example"
+);
+
 export default class ChatStyleguideChatMessage extends Component {
   @service currentUser;
 
@@ -92,48 +110,50 @@ export default class ChatStyleguideChatMessage extends Component {
       ];
     }
   }
+
+  <template>
+    <StyleguideExample @title="<ChatMessage>">
+      <StyleguideComponent>
+        <ChatMessage @message={{this.message}} @context="channel" />
+      </StyleguideComponent>
+
+      <Controls>
+        <Row @name="Deleted">
+          <DToggleSwitch
+            @state={{not (not this.message.deletedAt)}}
+            {{on "click" this.toggleDeleted}}
+          />
+        </Row>
+        <Row @name="Bookmark">
+          <DToggleSwitch
+            @state={{not (not this.message.bookmark)}}
+            {{on "click" this.toggleBookmarked}}
+          />
+        </Row>
+        <Row @name="Thread">
+          <DToggleSwitch
+            @state={{not (not this.message.thread)}}
+            {{on "click" this.toggleThread}}
+          />
+        </Row>
+        <Row @name="Reactions">
+          <DToggleSwitch
+            @state={{not (not this.message.reactions)}}
+            {{on "click" this.toggleReaction}}
+          />
+        </Row>
+        <Row @name="Upload">
+          <DToggleSwitch
+            @state={{not (not this.message.uploads)}}
+            {{on "click" this.toggleUpload}}
+          />
+        </Row>
+        <Row @name="Message">
+          <textarea
+            {{on "input" this.updateMessage}}
+          >{{this.message.message}}</textarea>
+        </Row>
+      </Controls>
+    </StyleguideExample>
+  </template>
 }
-
-<StyleguideExample @title="<ChatMessage>">
-  <Styleguide::Component>
-    <ChatMessage @message={{this.message}} @context="channel" />
-  </Styleguide::Component>
-
-  <Styleguide::Controls>
-    <Styleguide::Controls::Row @name="Deleted">
-      <DToggleSwitch
-        @state={{not (not this.message.deletedAt)}}
-        {{on "click" this.toggleDeleted}}
-      />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="Bookmark">
-      <DToggleSwitch
-        @state={{not (not this.message.bookmark)}}
-        {{on "click" this.toggleBookmarked}}
-      />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="Thread">
-      <DToggleSwitch
-        @state={{not (not this.message.thread)}}
-        {{on "click" this.toggleThread}}
-      />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="Reactions">
-      <DToggleSwitch
-        @state={{not (not this.message.reactions)}}
-        {{on "click" this.toggleReaction}}
-      />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="Upload">
-      <DToggleSwitch
-        @state={{not (not this.message.uploads)}}
-        {{on "click" this.toggleUpload}}
-      />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="Message">
-      <textarea
-        {{on "input" this.updateMessage}}
-      >{{this.message.message}}</textarea>
-    </Styleguide::Controls::Row>
-  </Styleguide::Controls>
-</StyleguideExample>
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-archive-channel.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-archive-channel.gjs
index 900da5ba462..d315bcb3c27 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-archive-channel.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-archive-channel.gjs
@@ -2,9 +2,18 @@ import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { getOwner } from "@ember/owner";
 import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import { optionalRequire } from "discourse/lib/utilities";
 import ChatModalArchiveChannel from "discourse/plugins/chat/discourse/components/chat/modal/archive-channel";
 import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
+const Row = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/controls/row"
+);
+const StyleguideExample = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide-example"
+);
+
 export default class ChatStyleguideChatModalArchiveChannel extends Component {
   @service modal;
 
@@ -18,10 +27,12 @@ export default class ChatStyleguideChatModalArchiveChannel extends Component {
       },
     });
   }
-}
 
-<StyleguideExample @title="<Chat::Modal::ArchiveChannel>">
-  <Styleguide::Controls::Row>
-    <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
-  </Styleguide::Controls::Row>
-</StyleguideExample>
\ No newline at end of file
+  <template>
+    <StyleguideExample @title="<Chat::Modal::ArchiveChannel>">
+      <Row>
+        <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
+      </Row>
+    </StyleguideExample>
+  </template>
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-create-channel.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-create-channel.gjs
index d28fd75e5da..82bddb49e8e 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-create-channel.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-create-channel.gjs
@@ -1,8 +1,17 @@
 import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import { optionalRequire } from "discourse/lib/utilities";
 import ChatModalCreateChannel from "discourse/plugins/chat/discourse/components/chat/modal/create-channel";
 
+const Row = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/controls/row"
+);
+const StyleguideExample = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide-example"
+);
+
 export default class ChatStyleguideChatModalCreateChannel extends Component {
   @service modal;
 
@@ -10,10 +19,12 @@ export default class ChatStyleguideChatModalCreateChannel extends Component {
   openModal() {
     return this.modal.show(ChatModalCreateChannel);
   }
-}
 
-<StyleguideExample @title="<Chat::Modal::CreateChannel>">
-  <Styleguide::Controls::Row>
-    <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
-  </Styleguide::Controls::Row>
-</StyleguideExample>
\ No newline at end of file
+  <template>
+    <StyleguideExample @title="<Chat::Modal::CreateChannel>">
+      <Row>
+        <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
+      </Row>
+    </StyleguideExample>
+  </template>
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-delete-channel.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-delete-channel.gjs
index da8be4d4dcf..a2e93a0072d 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-delete-channel.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-delete-channel.gjs
@@ -2,9 +2,18 @@ import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { getOwner } from "@ember/owner";
 import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import { optionalRequire } from "discourse/lib/utilities";
 import ChatModalDeleteChannel from "discourse/plugins/chat/discourse/components/chat/modal/delete-channel";
 import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
+const Row = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/controls/row"
+);
+const StyleguideExample = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide-example"
+);
+
 export default class ChatStyleguideChatModalDeleteChannel extends Component {
   @service modal;
 
@@ -16,10 +25,12 @@ export default class ChatStyleguideChatModalDeleteChannel extends Component {
       model: { channel: this.channel },
     });
   }
-}
 
-<StyleguideExample @title="<Chat::Modal::DeleteChannel>">
-  <Styleguide::Controls::Row>
-    <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
-  </Styleguide::Controls::Row>
-</StyleguideExample>
\ No newline at end of file
+  <template>
+    <StyleguideExample @title="<Chat::Modal::DeleteChannel>">
+      <Row>
+        <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
+      </Row>
+    </StyleguideExample>
+  </template>
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-description.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-description.gjs
index ae830526412..2e6112d9a3c 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-description.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-description.gjs
@@ -2,9 +2,18 @@ import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { getOwner } from "@ember/owner";
 import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import { optionalRequire } from "discourse/lib/utilities";
 import ChatModalEditChannelDescription from "discourse/plugins/chat/discourse/components/chat/modal/edit-channel-description";
 import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
+const Row = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/controls/row"
+);
+const StyleguideExample = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide-example"
+);
+
 export default class ChatStyleguideChatModalEditChannelDescription extends Component {
   @service modal;
 
@@ -16,10 +25,12 @@ export default class ChatStyleguideChatModalEditChannelDescription extends Compo
       model: this.channel,
     });
   }
-}
 
-<StyleguideExample @title="<Chat::Modal::EditChannelDescription>">
-  <Styleguide::Controls::Row>
-    <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
-  </Styleguide::Controls::Row>
-</StyleguideExample>
\ No newline at end of file
+  <template>
+    <StyleguideExample @title="<Chat::Modal::EditChannelDescription>">
+      <Row>
+        <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
+      </Row>
+    </StyleguideExample>
+  </template>
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-name.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-name.gjs
index f9565680779..6aa0dca15c4 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-name.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-name.gjs
@@ -2,9 +2,18 @@ import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { getOwner } from "@ember/owner";
 import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import { optionalRequire } from "discourse/lib/utilities";
 import ChatModalEditChannelName from "discourse/plugins/chat/discourse/components/chat/modal/edit-channel-name";
 import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
+const Row = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/controls/row"
+);
+const StyleguideExample = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide-example"
+);
+
 export default class ChatStyleguideChatModalEditChannelName extends Component {
   @service modal;
 
@@ -16,10 +25,12 @@ export default class ChatStyleguideChatModalEditChannelName extends Component {
       model: this.channel,
     });
   }
-}
 
-<StyleguideExample @title="<Chat::Modal::EditChannelName>">
-  <Styleguide::Controls::Row>
-    <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
-  </Styleguide::Controls::Row>
-</StyleguideExample>
\ No newline at end of file
+  <template>
+    <StyleguideExample @title="<Chat::Modal::EditChannelName>">
+      <Row>
+        <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
+      </Row>
+    </StyleguideExample>
+  </template>
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-move-message-to-channel.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-move-message-to-channel.gjs
index a1f7a826cfa..9a930b74cd0 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-move-message-to-channel.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-move-message-to-channel.gjs
@@ -2,9 +2,18 @@ import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { getOwner } from "@ember/owner";
 import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import { optionalRequire } from "discourse/lib/utilities";
 import ChatModalMoveMessageToChannel from "discourse/plugins/chat/discourse/components/chat/modal/move-message-to-channel";
 import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
+const Row = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/controls/row"
+);
+const StyleguideExample = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide-example"
+);
+
 export default class ChatStyleguideChatModalMoveMessageToChannel extends Component {
   @service modal;
 
@@ -26,10 +35,12 @@ export default class ChatStyleguideChatModalMoveMessageToChannel extends Compone
       },
     });
   }
-}
 
-<StyleguideExample @title="<Chat::Modal::MoveMessageToChannel>">
-  <Styleguide::Controls::Row>
-    <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
-  </Styleguide::Controls::Row>
-</StyleguideExample>
\ No newline at end of file
+  <template>
+    <StyleguideExample @title="<Chat::Modal::MoveMessageToChannel>">
+      <Row>
+        <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
+      </Row>
+    </StyleguideExample>
+  </template>
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-new-message.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-new-message.gjs
index 9ff83a969bb..1e35e0d4327 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-new-message.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-new-message.gjs
@@ -1,8 +1,17 @@
 import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import { optionalRequire } from "discourse/lib/utilities";
 import ChatModalNewMessage from "discourse/plugins/chat/discourse/components/chat/modal/new-message";
 
+const Row = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/controls/row"
+);
+const StyleguideExample = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide-example"
+);
+
 export default class ChatStyleguideChatModalNewMessage extends Component {
   @service modal;
 
@@ -10,10 +19,12 @@ export default class ChatStyleguideChatModalNewMessage extends Component {
   openModal() {
     return this.modal.show(ChatModalNewMessage);
   }
-}
 
-<StyleguideExample @title="<Chat::Modal::NewMessage>">
-  <Styleguide::Controls::Row>
-    <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
-  </Styleguide::Controls::Row>
-</StyleguideExample>
\ No newline at end of file
+  <template>
+    <StyleguideExample @title="<Chat::Modal::NewMessage>">
+      <Row>
+        <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
+      </Row>
+    </StyleguideExample>
+  </template>
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-thread-settings.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-thread-settings.gjs
index 268491ec82d..1ba29f4e3d6 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-thread-settings.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-thread-settings.gjs
@@ -2,9 +2,18 @@ import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { getOwner } from "@ember/owner";
 import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import { optionalRequire } from "discourse/lib/utilities";
 import ChatModalThreadSettings from "discourse/plugins/chat/discourse/components/chat/modal/thread-settings";
 import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
+const Row = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/controls/row"
+);
+const StyleguideExample = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide-example"
+);
+
 export default class ChatStyleguideChatModalThreadSettings extends Component {
   @service modal;
 
@@ -14,10 +23,12 @@ export default class ChatStyleguideChatModalThreadSettings extends Component {
       model: new ChatFabricators(getOwner(this)).thread(),
     });
   }
-}
 
-<StyleguideExample @title="<Chat::Modal::ThreadSettings>">
-  <Styleguide::Controls::Row>
-    <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
-  </Styleguide::Controls::Row>
-</StyleguideExample>
\ No newline at end of file
+  <template>
+    <StyleguideExample @title="<Chat::Modal::ThreadSettings>">
+      <Row>
+        <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
+      </Row>
+    </StyleguideExample>
+  </template>
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-toggle-channel-status.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-toggle-channel-status.gjs
index 8f2125c2ba5..2bffcd43241 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-toggle-channel-status.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-toggle-channel-status.gjs
@@ -2,9 +2,18 @@ import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { getOwner } from "@ember/owner";
 import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import { optionalRequire } from "discourse/lib/utilities";
 import ChatModalToggleChannelStatus from "discourse/plugins/chat/discourse/components/chat/modal/toggle-channel-status";
 import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
+const Row = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/controls/row"
+);
+const StyleguideExample = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide-example"
+);
+
 export default class ChatStyleguideChatModalToggleChannelStatus extends Component {
   @service modal;
 
@@ -14,10 +23,12 @@ export default class ChatStyleguideChatModalToggleChannelStatus extends Componen
       model: new ChatFabricators(getOwner(this)).channel(),
     });
   }
-}
 
-<StyleguideExample @title="<Chat::Modal::ToggleChannelStatus>">
-  <Styleguide::Controls::Row>
-    <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
-  </Styleguide::Controls::Row>
-</StyleguideExample>
\ No newline at end of file
+  <template>
+    <StyleguideExample @title="<Chat::Modal::ToggleChannelStatus>">
+      <Row>
+        <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
+      </Row>
+    </StyleguideExample>
+  </template>
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-thread-list-item.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-thread-list-item.gjs
index a67126b0bca..955b79808fd 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-thread-list-item.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-thread-list-item.gjs
@@ -3,8 +3,17 @@ import { tracked } from "@glimmer/tracking";
 import { getOwner } from "@ember/owner";
 import { next } from "@ember/runloop";
 import { service } from "@ember/service";
+import { optionalRequire } from "discourse/lib/utilities";
+import Item from "discourse/plugins/chat/discourse/components/chat/thread-list/item";
 import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
+const StyleguideComponent = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide/component"
+);
+const StyleguideExample = optionalRequire(
+  "discourse/plugins/styleguide/discourse/components/styleguide-example"
+);
+
 export default class ChatStyleguideChatThreadListItem extends Component {
   @service currentUser;
 
@@ -17,12 +26,14 @@ export default class ChatStyleguideChatThreadListItem extends Component {
       this.thread = new ChatFabricators(getOwner(this)).thread();
     });
   }
-}
 
-<StyleguideExample @title="<Chat::ThreadList::Item>">
-  <Styleguide::Component>
-    {{#if this.thread}}
-      <Chat::ThreadList::Item @thread={{this.thread}} />
-    {{/if}}
-  </Styleguide::Component>
-</StyleguideExample>
\ No newline at end of file
+  <template>
+    <StyleguideExample @title="<Chat::ThreadList::Item>">
+      <StyleguideComponent>
+        {{#if this.thread}}
+          <Item @thread={{this.thread}} />
+        {{/if}}
+      </StyleguideComponent>
+    </StyleguideExample>
+  </template>
+}
diff --git a/plugins/discourse-local-dates/assets/javascripts/discourse/components/modal/local-dates-create.gjs b/plugins/discourse-local-dates/assets/javascripts/discourse/components/modal/local-dates-create.gjs
index 6f2624d9ebe..66820821b25 100644
--- a/plugins/discourse-local-dates/assets/javascripts/discourse/components/modal/local-dates-create.gjs
+++ b/plugins/discourse-local-dates/assets/javascripts/discourse/components/modal/local-dates-create.gjs
@@ -1,14 +1,25 @@
 import Component from "@ember/component";
+import { fn, hash } from "@ember/helper";
+import { on } from "@ember/modifier";
 import EmberObject, { action } from "@ember/object";
 import { notEmpty } from "@ember/object/computed";
 import { schedule } from "@ember/runloop";
 import { observes } from "@ember-decorators/object";
+import CalendarDateTimeInput from "discourse/components/calendar-date-time-input";
+import DButton from "discourse/components/d-button";
+import DModal from "discourse/components/d-modal";
+import TextField from "discourse/components/text-field";
+import icon from "discourse/helpers/d-icon";
+import htmlSafe from "discourse/helpers/html-safe";
 import { propertyNotEqual } from "discourse/lib/computed";
 import computed, { debounce } from "discourse/lib/decorators";
 import { INPUT_DELAY } from "discourse/lib/environment";
 import { applyLocalDates } from "discourse/lib/local-dates";
 import { cook } from "discourse/lib/text";
 import { i18n } from "discourse-i18n";
+import ComboBox from "select-kit/components/combo-box";
+import MultiSelect from "select-kit/components/multi-select";
+import TimezoneInput from "select-kit/components/timezone-input";
 import generateDateMarkup from "discourse/plugins/discourse-local-dates/lib/local-date-markup-generator";
 
 export default class LocalDatesCreate extends Component {
@@ -371,205 +382,213 @@ export default class LocalDatesCreate extends Component {
   cancel() {
     this.closeModal();
   }
-}
 
-<DModal
-  @title={{i18n "discourse_local_dates.title"}}
-  @closeModal={{@closeModal}}
-  class="discourse-local-dates-create-modal -large"
->
-  <:body>
-    <div class="form">
-      {{#if this.isValid}}
-        {{#if this.timezoneIsDifferentFromUserTimezone}}
-          <div class="preview alert alert-info">
-            {{i18n "discourse_local_dates.create.form.current_timezone"}}
-            <b>{{this.formattedCurrentUserTimezone}}</b>{{this.currentPreview}}
-          </div>
-        {{/if}}
-      {{else}}
-        <div class="validation-error alert alert-error">
-          {{i18n "discourse_local_dates.create.form.invalid_date"}}
-        </div>
-      {{/if}}
+  <template>
+    <DModal
+      @title={{i18n "discourse_local_dates.title"}}
+      @closeModal={{@closeModal}}
+      class="discourse-local-dates-create-modal -large"
+    >
+      <:body>
+        <div class="form">
+          {{#if this.isValid}}
+            {{#if this.timezoneIsDifferentFromUserTimezone}}
+              <div class="preview alert alert-info">
+                {{i18n "discourse_local_dates.create.form.current_timezone"}}
+                <b
+                >{{this.formattedCurrentUserTimezone}}</b>{{this.currentPreview}}
+              </div>
+            {{/if}}
+          {{else}}
+            <div class="validation-error alert alert-error">
+              {{i18n "discourse_local_dates.create.form.invalid_date"}}
+            </div>
+          {{/if}}
 
-      {{this.computeDate}}
+          {{this.computeDate}}
 
-      <div class="date-time-configuration">
-        <div class="inputs-panel">
-          <div
-            class="date-time-control from
-              {{if this.fromSelected 'is-selected'}}
-              {{if this.fromFilled 'is-filled'}}"
-          >
-            {{d-icon "calendar-days"}}
-            <DButton
-              @action={{this.focusFrom}}
-              @translatedLabel={{this.formattedFrom}}
-              id="from-date-time"
-              class="date-time"
-              autofocus
-            />
-          </div>
+          <div class="date-time-configuration">
+            <div class="inputs-panel">
+              <div
+                class="date-time-control from
+                  {{if this.fromSelected 'is-selected'}}
+                  {{if this.fromFilled 'is-filled'}}"
+              >
+                {{icon "calendar-days"}}
+                <DButton
+                  @action={{this.focusFrom}}
+                  @translatedLabel={{this.formattedFrom}}
+                  id="from-date-time"
+                  class="date-time"
+                  autofocus
+                />
+              </div>
 
-          <div
-            class="date-time-control to
-              {{if this.toSelected 'is-selected'}}
-              {{if this.toFilled 'is-filled'}}"
-          >
-            {{d-icon "calendar-days"}}
-            <DButton
-              @action={{this.focusTo}}
-              @translatedLabel={{this.formattedTo}}
-              class="date-time"
-            />
-            {{#if this.toFilled}}
-              <DButton
-                @action={{this.eraseToDateTime}}
-                @icon="xmark"
-                class="delete-to-date"
+              <div
+                class="date-time-control to
+                  {{if this.toSelected 'is-selected'}}
+                  {{if this.toFilled 'is-filled'}}"
+              >
+                {{icon "calendar-days"}}
+                <DButton
+                  @action={{this.focusTo}}
+                  @translatedLabel={{this.formattedTo}}
+                  class="date-time"
+                />
+                {{#if this.toFilled}}
+                  <DButton
+                    @action={{this.eraseToDateTime}}
+                    @icon="xmark"
+                    class="delete-to-date"
+                  />
+                {{/if}}
+              </div>
+
+              {{#if this.site.desktopView}}
+                <TimezoneInput
+                  @options={{hash icon="globe"}}
+                  @value={{this.timezone}}
+                  @onChange={{fn (mut this.timezone)}}
+                />
+              {{/if}}
+            </div>
+
+            <div class="picker-panel">
+              <CalendarDateTimeInput
+                @datePickerId="local-date-create-form"
+                @date={{this.selectedDate}}
+                @time={{this.selectedTime}}
+                @minDate={{this.minDate}}
+                @timeFormat={{this.timeFormat}}
+                @dateFormat={{this.dateFormat}}
+                @onChangeDate={{this.changeSelectedDate}}
+                @onChangeTime={{this.changeSelectedTime}}
+              />
+            </div>
+
+            {{#if this.site.mobileView}}
+              <TimezoneInput
+                @value={{this.timezone}}
+                @options={{hash icon="globe"}}
+                @onChange={{fn (mut this.timezone)}}
               />
             {{/if}}
           </div>
 
-          {{#if this.site.desktopView}}
-            <TimezoneInput
-              @options={{hash icon="globe"}}
-              @value={{this.timezone}}
-              @onChange={{fn (mut this.timezone)}}
-            />
-          {{/if}}
-        </div>
+          {{#if this.advancedMode}}
+            <div class="advanced-options">
+              {{#unless this.isRange}}
+                <div class="control-group recurrence">
+                  <label class="control-label">
+                    {{i18n "discourse_local_dates.create.form.recurring_title"}}
+                  </label>
+                  <p>{{htmlSafe
+                      (i18n
+                        "discourse_local_dates.create.form.recurring_description"
+                      )
+                    }}</p>
+                  <div class="controls">
+                    <ComboBox
+                      @content={{this.recurringOptions}}
+                      @value={{this.recurring}}
+                      @onChange={{fn (mut this.recurring)}}
+                      @options={{hash
+                        none="discourse_local_dates.create.form.recurring_none"
+                      }}
+                      class="recurrence-input"
+                    />
+                  </div>
+                </div>
+              {{/unless}}
 
-        <div class="picker-panel">
-          <CalendarDateTimeInput
-            @datePickerId="local-date-create-form"
-            @date={{this.selectedDate}}
-            @time={{this.selectedTime}}
-            @minDate={{this.minDate}}
-            @timeFormat={{this.timeFormat}}
-            @dateFormat={{this.dateFormat}}
-            @onChangeDate={{this.changeSelectedDate}}
-            @onChangeTime={{this.changeSelectedTime}}
-          />
-        </div>
+              <div class="control-group timezones">
+                <label>{{i18n
+                    "discourse_local_dates.create.form.timezones_title"
+                  }}</label>
+                <p>{{i18n
+                    "discourse_local_dates.create.form.timezones_description"
+                  }}</p>
+                <div class="controls">
+                  <MultiSelect
+                    @valueProperty={{null}}
+                    @nameProperty={{null}}
+                    @content={{this.allTimezones}}
+                    @value={{this.timezones}}
+                    @options={{hash allowAny=false maximum=5}}
+                    class="timezones-input"
+                  />
+                </div>
+              </div>
 
-        {{#if this.site.mobileView}}
-          <TimezoneInput
-            @value={{this.timezone}}
-            @options={{hash icon="globe"}}
-            @onChange={{fn (mut this.timezone)}}
-          />
-        {{/if}}
-      </div>
-
-      {{#if this.advancedMode}}
-        <div class="advanced-options">
-          {{#unless this.isRange}}
-            <div class="control-group recurrence">
-              <label class="control-label">
-                {{i18n "discourse_local_dates.create.form.recurring_title"}}
-              </label>
-              <p>{{html-safe
-                  (i18n
-                    "discourse_local_dates.create.form.recurring_description"
-                  )
-                }}</p>
-              <div class="controls">
-                <ComboBox
-                  @content={{this.recurringOptions}}
-                  @value={{this.recurring}}
-                  @onChange={{fn (mut this.recurring)}}
-                  @options={{hash
-                    none="discourse_local_dates.create.form.recurring_none"
+              <div class="control-group format">
+                <label>{{i18n
+                    "discourse_local_dates.create.form.format_title"
+                  }}</label>
+                <p>
+                  {{i18n
+                    "discourse_local_dates.create.form.format_description"
                   }}
-                  class="recurrence-input"
-                />
+                  <a
+                    target="_blank"
+                    href="https://momentjs.com/docs/#/parsing/string-format/"
+                    rel="noopener noreferrer"
+                  >
+                    {{icon "circle-question"}}
+                  </a>
+                </p>
+                <div class="controls">
+                  <TextField @value={{this.format}} class="format-input" />
+                </div>
+              </div>
+              <div class="control-group">
+                <ul class="formats">
+                  {{#each this.previewedFormats as |previewedFormat|}}
+                    <li class="format">
+                      <a
+                        class="moment-format"
+                        href
+                        {{on
+                          "click"
+                          (fn this.updateFormat previewedFormat.format)
+                        }}
+                      >
+                        {{previewedFormat.format}}
+                      </a>
+                      <span class="previewed-format">
+                        {{previewedFormat.preview}}
+                      </span>
+                    </li>
+                  {{/each}}
+                </ul>
               </div>
             </div>
-          {{/unless}}
-
-          <div class="control-group timezones">
-            <label>{{i18n
-                "discourse_local_dates.create.form.timezones_title"
-              }}</label>
-            <p>{{i18n
-                "discourse_local_dates.create.form.timezones_description"
-              }}</p>
-            <div class="controls">
-              <MultiSelect
-                @valueProperty={{null}}
-                @nameProperty={{null}}
-                @content={{this.allTimezones}}
-                @value={{this.timezones}}
-                @options={{hash allowAny=false maximum=5}}
-                class="timezones-input"
-              />
-            </div>
-          </div>
-
-          <div class="control-group format">
-            <label>{{i18n
-                "discourse_local_dates.create.form.format_title"
-              }}</label>
-            <p>
-              {{i18n "discourse_local_dates.create.form.format_description"}}
-              <a
-                target="_blank"
-                href="https://momentjs.com/docs/#/parsing/string-format/"
-                rel="noopener noreferrer"
-              >
-                {{d-icon "circle-question"}}
-              </a>
-            </p>
-            <div class="controls">
-              <TextField @value={{this.format}} class="format-input" />
-            </div>
-          </div>
-          <div class="control-group">
-            <ul class="formats">
-              {{#each this.previewedFormats as |previewedFormat|}}
-                <li class="format">
-                  <a
-                    class="moment-format"
-                    href
-                    {{on "click" (fn this.updateFormat previewedFormat.format)}}
-                  >
-                    {{previewedFormat.format}}
-                  </a>
-                  <span class="previewed-format">
-                    {{previewedFormat.preview}}
-                  </span>
-                </li>
-              {{/each}}
-            </ul>
-          </div>
+          {{/if}}
         </div>
-      {{/if}}
-    </div>
-  </:body>
+      </:body>
 
-  <:footer>
+      <:footer>
 
-    {{#if this.isValid}}
-      <DButton
-        @action={{this.save}}
-        @label="discourse_local_dates.create.form.insert"
-        class="btn-primary"
-      />
-    {{/if}}
+        {{#if this.isValid}}
+          <DButton
+            @action={{this.save}}
+            @label="discourse_local_dates.create.form.insert"
+            class="btn-primary"
+          />
+        {{/if}}
 
-    <DButton
-      @action={{this.cancel}}
-      @translatedLabel={{i18n "cancel"}}
-      class="btn-flat"
-    />
+        <DButton
+          @action={{this.cancel}}
+          @translatedLabel={{i18n "cancel"}}
+          class="btn-flat"
+        />
 
-    <DButton
-      @action={{this.toggleAdvancedMode}}
-      @icon="gear"
-      @label={{this.toggleModeBtnLabel}}
-      class="btn-default advanced-mode-btn"
-    />
-  </:footer>
-</DModal>
\ No newline at end of file
+        <DButton
+          @action={{this.toggleAdvancedMode}}
+          @icon="gear"
+          @label={{this.toggleModeBtnLabel}}
+          class="btn-default advanced-mode-btn"
+        />
+      </:footer>
+    </DModal>
+  </template>
+}
diff --git a/plugins/discourse-presence/assets/javascripts/discourse/connectors/before-composer-controls/presence.gjs b/plugins/discourse-presence/assets/javascripts/discourse/connectors/before-composer-controls/presence.gjs
index b11a699f041..241aafd6d56 100644
--- a/plugins/discourse-presence/assets/javascripts/discourse/connectors/before-composer-controls/presence.gjs
+++ b/plugins/discourse-presence/assets/javascripts/discourse/connectors/before-composer-controls/presence.gjs
@@ -1 +1,8 @@
-<ComposerPresenceDisplay @model={{@outletArgs.model}} />
\ No newline at end of file
+import ComposerPresenceDisplay from "discourse/plugins/discourse-presence/discourse/components/composer-presence-display";
+
+const Presence = <template>
+  <div class="before-composer-controls-outlet presence">
+    <ComposerPresenceDisplay @model={{@outletArgs.model}} />
+  </div>
+</template>;
+export default Presence;
diff --git a/plugins/discourse-presence/assets/javascripts/discourse/connectors/topic-above-footer-buttons/presence.gjs b/plugins/discourse-presence/assets/javascripts/discourse/connectors/topic-above-footer-buttons/presence.gjs
index f708925aac5..cfa292e522a 100644
--- a/plugins/discourse-presence/assets/javascripts/discourse/connectors/topic-above-footer-buttons/presence.gjs
+++ b/plugins/discourse-presence/assets/javascripts/discourse/connectors/topic-above-footer-buttons/presence.gjs
@@ -1 +1,8 @@
-<TopicPresenceDisplay @topic={{@outletArgs.model}} />
\ No newline at end of file
+import TopicPresenceDisplay from "discourse/plugins/discourse-presence/discourse/components/topic-presence-display";
+
+const Presence = <template>
+  <div class="topic-above-footer-buttons-outlet presence">
+    <TopicPresenceDisplay @topic={{@outletArgs.model}} />
+  </div>
+</template>;
+export default Presence;
diff --git a/plugins/poll/assets/javascripts/discourse/components/modal/poll-breakdown.gjs b/plugins/poll/assets/javascripts/discourse/components/modal/poll-breakdown.gjs
index 995e7454bb0..5bcae423424 100644
--- a/plugins/poll/assets/javascripts/discourse/components/modal/poll-breakdown.gjs
+++ b/plugins/poll/assets/javascripts/discourse/components/modal/poll-breakdown.gjs
@@ -1,13 +1,21 @@
 import Component from "@ember/component";
+import { fn, get } from "@ember/helper";
+import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import { classify } from "@ember/string";
 import { htmlSafe } from "@ember/template";
+import { eq } from "truth-helpers";
+import DModal from "discourse/components/d-modal";
+import concatClass from "discourse/helpers/concat-class";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import discourseComputed from "discourse/lib/decorators";
 import loadScript from "discourse/lib/load-script";
 import { i18n } from "discourse-i18n";
+import ComboBox from "select-kit/components/combo-box";
+import PollBreakdownChart from "discourse/plugins/poll/discourse/components/poll-breakdown-chart";
+import PollBreakdownOption from "discourse/plugins/poll/discourse/components/poll-breakdown-option";
 
 export default class PollBreakdownModal extends Component {
   @service dialog;
@@ -88,85 +96,87 @@ export default class PollBreakdownModal extends Component {
   onSelectPanel(panel) {
     this.set("displayMode", panel.id);
   }
+
+  <template>
+    {{! template-lint-disable no-invalid-interactive }}
+    <DModal
+      @title={{i18n "poll.breakdown.title"}}
+      @closeModal={{@closeModal}}
+      class="poll-breakdown has-tabs"
+    >
+      <:headerBelowTitle>
+        <ul class="modal-tabs">
+          <li
+            class={{concatClass
+              "modal-tab percentage"
+              (if (eq this.displayMode "percentage") "is-active")
+            }}
+            {{on "click" (fn (mut this.displayMode) "percentage")}}
+          >{{i18n "poll.breakdown.percentage"}}</li>
+          <li
+            class={{concatClass
+              "modal-tab count"
+              (if (eq this.displayMode "count") "is-active")
+            }}
+            {{on "click" (fn (mut this.displayMode) "count")}}
+          >{{i18n "poll.breakdown.count"}}</li>
+        </ul>
+      </:headerBelowTitle>
+      <:body>
+        <div class="poll-breakdown-sidebar">
+          <p class="poll-breakdown-title">
+            {{this.title}}
+          </p>
+
+          <div class="poll-breakdown-total-votes">{{i18n
+              "poll.breakdown.votes"
+              count=this.model.poll.voters
+            }}</div>
+
+          <ul class="poll-breakdown-options">
+            {{#each this.model.poll.options as |option index|}}
+              <PollBreakdownOption
+                @option={{option}}
+                @index={{index}}
+                @totalVotes={{this.totalVotes}}
+                @optionsCount={{this.model.poll.options.length}}
+                @displayMode={{this.displayMode}}
+                @highlightedOption={{this.highlightedOption}}
+                @onMouseOver={{fn (mut this.highlightedOption) index}}
+                @onMouseOut={{fn (mut this.highlightedOption) null}}
+              />
+            {{/each}}
+          </ul>
+        </div>
+
+        <div class="poll-breakdown-body">
+          <div class="poll-breakdown-body-header">
+            <label class="poll-breakdown-body-header-label">{{i18n
+                "poll.breakdown.breakdown"
+              }}</label>
+
+            <ComboBox
+              @content={{this.groupableUserFields}}
+              @value={{this.groupedBy}}
+              @nameProperty="label"
+              @onChange={{this.setGrouping}}
+              class="poll-breakdown-dropdown"
+            />
+          </div>
+
+          <div class="poll-breakdown-charts">
+            {{#each this.charts as |chart|}}
+              <PollBreakdownChart
+                @group={{get chart "group"}}
+                @options={{get chart "options"}}
+                @displayMode={{this.displayMode}}
+                @highlightedOption={{this.highlightedOption}}
+                @setHighlightedOption={{fn (mut this.highlightedOption)}}
+              />
+            {{/each}}
+          </div>
+        </div>
+      </:body>
+    </DModal>
+  </template>
 }
-
-{{! template-lint-disable no-invalid-interactive }}
-<DModal
-  @title={{i18n "poll.breakdown.title"}}
-  @closeModal={{@closeModal}}
-  class="poll-breakdown has-tabs"
->
-  <:headerBelowTitle>
-    <ul class="modal-tabs">
-      <li
-        class={{concat-class
-          "modal-tab percentage"
-          (if (eq this.displayMode "percentage") "is-active")
-        }}
-        {{on "click" (fn (mut this.displayMode) "percentage")}}
-      >{{i18n "poll.breakdown.percentage"}}</li>
-      <li
-        class={{concat-class
-          "modal-tab count"
-          (if (eq this.displayMode "count") "is-active")
-        }}
-        {{on "click" (fn (mut this.displayMode) "count")}}
-      >{{i18n "poll.breakdown.count"}}</li>
-    </ul>
-  </:headerBelowTitle>
-  <:body>
-    <div class="poll-breakdown-sidebar">
-      <p class="poll-breakdown-title">
-        {{this.title}}
-      </p>
-
-      <div class="poll-breakdown-total-votes">{{i18n
-          "poll.breakdown.votes"
-          count=this.model.poll.voters
-        }}</div>
-
-      <ul class="poll-breakdown-options">
-        {{#each this.model.poll.options as |option index|}}
-          <PollBreakdownOption
-            @option={{option}}
-            @index={{index}}
-            @totalVotes={{this.totalVotes}}
-            @optionsCount={{this.model.poll.options.length}}
-            @displayMode={{this.displayMode}}
-            @highlightedOption={{this.highlightedOption}}
-            @onMouseOver={{fn (mut this.highlightedOption) index}}
-            @onMouseOut={{fn (mut this.highlightedOption) null}}
-          />
-        {{/each}}
-      </ul>
-    </div>
-
-    <div class="poll-breakdown-body">
-      <div class="poll-breakdown-body-header">
-        <label class="poll-breakdown-body-header-label">{{i18n
-            "poll.breakdown.breakdown"
-          }}</label>
-
-        <ComboBox
-          @content={{this.groupableUserFields}}
-          @value={{this.groupedBy}}
-          @nameProperty="label"
-          @onChange={{this.setGrouping}}
-          class="poll-breakdown-dropdown"
-        />
-      </div>
-
-      <div class="poll-breakdown-charts">
-        {{#each this.charts as |chart|}}
-          <PollBreakdownChart
-            @group={{get chart "group"}}
-            @options={{get chart "options"}}
-            @displayMode={{this.displayMode}}
-            @highlightedOption={{this.highlightedOption}}
-            @setHighlightedOption={{fn (mut this.highlightedOption)}}
-          />
-        {{/each}}
-      </div>
-    </div>
-  </:body>
-</DModal>
\ No newline at end of file
diff --git a/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.gjs b/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.gjs
index d46d6229017..ec679514cef 100644
--- a/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.gjs
+++ b/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.gjs
@@ -1,10 +1,24 @@
-import Component from "@ember/component";
+import Component, { Input, Textarea } from "@ember/component";
+import { fn } from "@ember/helper";
+import { on } from "@ember/modifier";
 import EmberObject, { action } from "@ember/object";
 import { gt, or } from "@ember/object/computed";
 import { service } from "@ember/service";
 import { observes } from "@ember-decorators/object";
+import { and, not } from "truth-helpers";
+import DButton from "discourse/components/d-button";
+import DModal from "discourse/components/d-modal";
+import DToggleSwitch from "discourse/components/d-toggle-switch";
+import DateTimeInput from "discourse/components/date-time-input";
+import InputTip from "discourse/components/input-tip";
+import RadioButton from "discourse/components/radio-button";
+import concatClass from "discourse/helpers/concat-class";
+import icon from "discourse/helpers/d-icon";
 import discourseComputed from "discourse/lib/decorators";
+import autoFocus from "discourse/modifiers/auto-focus";
 import { i18n } from "discourse-i18n";
+import ComboBox from "select-kit/components/combo-box";
+import GroupChooser from "select-kit/components/group-chooser";
 
 export const BAR_CHART_TYPE = "bar";
 export const PIE_CHART_TYPE = "pie";
@@ -396,275 +410,277 @@ export default class PollUiBuilderModal extends Component {
   togglePublic() {
     this.set("publicPoll", !this.publicPoll);
   }
-}
 
-<DModal
-  @title={{i18n "poll.ui_builder.title"}}
-  @closeModal={{@closeModal}}
-  @inline={{@inline}}
-  class="poll-ui-builder"
->
-  <:body>
-    <ul class="nav nav-pills poll-type">
-      <li>
-        <DButton
-          @action={{fn this.updatePollType "regular"}}
-          class={{concatClass
-            "poll-type-value poll-type-value-regular"
-            (if this.isRegular "active")
-          }}
-        >
-          {{i18n "poll.ui_builder.poll_type.regular"}}
-        </DButton>
-      </li>
-      <li>
-        <DButton
-          @action={{fn this.updatePollType "multiple"}}
-          class={{concatClass
-            "poll-type-value poll-type-value-multiple"
-            (if this.isMultiple "active")
-          }}
-        >
-          {{i18n "poll.ui_builder.poll_type.multiple"}}
-        </DButton>
-      </li>
-      {{#if this.showNumber}}
-        <li>
-          <DButton
-            @action={{fn this.updatePollType "number"}}
-            class={{concatClass
-              "poll-type-value poll-type-value-number"
-              (if this.isNumber "active")
-            }}
-          >
-            {{i18n "poll.ui_builder.poll_type.number"}}
-          </DButton>
-        </li>
-      {{/if}}
-      {{#if this.showRankedChoice}}
-        <li>
-          <DButton
-            @action={{fn this.updatePollType "ranked_choice"}}
-            class={{concatClass
-              "poll-type-value poll-type-value-ranked-choice"
-              (if this.isRankedChoice "active")
-            }}
-          >
-            {{i18n "poll.ui_builder.poll_type.ranked_choice"}}
-          </DButton>
-        </li>
-      {{/if}}
-    </ul>
-
-    {{#if this.showAdvanced}}
-      <div class="input-group poll-title">
-        <label class="input-group-label">{{i18n
-            "poll.ui_builder.poll_title.label"
-          }}</label>
-        <Input @value={{this.pollTitle}} />
-      </div>
-    {{/if}}
-
-    {{#unless this.isNumber}}
-      <div class="poll-options">
-        {{#if this.showAdvanced}}
-          <label class="input-group-label">{{i18n
-              "poll.ui_builder.poll_options.label"
-            }}</label>
-          <Textarea
-            @value={{this.pollOptionsText}}
-            {{on "input" this.onOptionsTextChange}}
-          />
-          {{#if this.showMinNumOfOptionsValidation}}
-            {{#unless this.minNumOfOptionsValidation.ok}}
-              <InputTip @validation={{this.minNumOfOptionsValidation}} />
-            {{/unless}}
-          {{/if}}
-        {{else}}
-          {{#each this.pollOptions as |option index|}}
-            <div class="input-group poll-option-value">
-              <input
-                type="text"
-                value={{option.value}}
-                {{auto-focus}}
-                {{on "input" (fn this.updateValue option)}}
-                {{on "keydown" (fn this.onInputKeydown index)}}
-              />
-              {{#if this.canRemoveOption}}
-                <DButton
-                  @icon="trash-can"
-                  @action={{fn this.removeOption option}}
-                />
-              {{/if}}
-            </div>
-          {{/each}}
-
-          <div class="poll-option-controls">
+  <template>
+    <DModal
+      @title={{i18n "poll.ui_builder.title"}}
+      @closeModal={{@closeModal}}
+      @inline={{@inline}}
+      class="poll-ui-builder"
+    >
+      <:body>
+        <ul class="nav nav-pills poll-type">
+          <li>
             <DButton
-              @icon="plus"
-              @label="poll.ui_builder.poll_options.add"
-              @action={{fn this.addOption -1}}
-              class="btn-default poll-option-add"
-            />
-            {{#if
-              (and
-                this.showMinNumOfOptionsValidation
-                (not this.minNumOfOptionsValidation.ok)
-              )
-            }}
-              <InputTip @validation={{this.minNumOfOptionsValidation}} />
+              @action={{fn this.updatePollType "regular"}}
+              class={{concatClass
+                "poll-type-value poll-type-value-regular"
+                (if this.isRegular "active")
+              }}
+            >
+              {{i18n "poll.ui_builder.poll_type.regular"}}
+            </DButton>
+          </li>
+          <li>
+            <DButton
+              @action={{fn this.updatePollType "multiple"}}
+              class={{concatClass
+                "poll-type-value poll-type-value-multiple"
+                (if this.isMultiple "active")
+              }}
+            >
+              {{i18n "poll.ui_builder.poll_type.multiple"}}
+            </DButton>
+          </li>
+          {{#if this.showNumber}}
+            <li>
+              <DButton
+                @action={{fn this.updatePollType "number"}}
+                class={{concatClass
+                  "poll-type-value poll-type-value-number"
+                  (if this.isNumber "active")
+                }}
+              >
+                {{i18n "poll.ui_builder.poll_type.number"}}
+              </DButton>
+            </li>
+          {{/if}}
+          {{#if this.showRankedChoice}}
+            <li>
+              <DButton
+                @action={{fn this.updatePollType "ranked_choice"}}
+                class={{concatClass
+                  "poll-type-value poll-type-value-ranked-choice"
+                  (if this.isRankedChoice "active")
+                }}
+              >
+                {{i18n "poll.ui_builder.poll_type.ranked_choice"}}
+              </DButton>
+            </li>
+          {{/if}}
+        </ul>
+
+        {{#if this.showAdvanced}}
+          <div class="input-group poll-title">
+            <label class="input-group-label">{{i18n
+                "poll.ui_builder.poll_title.label"
+              }}</label>
+            <Input @value={{this.pollTitle}} />
+          </div>
+        {{/if}}
+
+        {{#unless this.isNumber}}
+          <div class="poll-options">
+            {{#if this.showAdvanced}}
+              <label class="input-group-label">{{i18n
+                  "poll.ui_builder.poll_options.label"
+                }}</label>
+              <Textarea
+                @value={{this.pollOptionsText}}
+                {{on "input" this.onOptionsTextChange}}
+              />
+              {{#if this.showMinNumOfOptionsValidation}}
+                {{#unless this.minNumOfOptionsValidation.ok}}
+                  <InputTip @validation={{this.minNumOfOptionsValidation}} />
+                {{/unless}}
+              {{/if}}
+            {{else}}
+              {{#each this.pollOptions as |option index|}}
+                <div class="input-group poll-option-value">
+                  <input
+                    type="text"
+                    value={{option.value}}
+                    {{autoFocus}}
+                    {{on "input" (fn this.updateValue option)}}
+                    {{on "keydown" (fn this.onInputKeydown index)}}
+                  />
+                  {{#if this.canRemoveOption}}
+                    <DButton
+                      @icon="trash-can"
+                      @action={{fn this.removeOption option}}
+                    />
+                  {{/if}}
+                </div>
+              {{/each}}
+
+              <div class="poll-option-controls">
+                <DButton
+                  @icon="plus"
+                  @label="poll.ui_builder.poll_options.add"
+                  @action={{fn this.addOption -1}}
+                  class="btn-default poll-option-add"
+                />
+                {{#if
+                  (and
+                    this.showMinNumOfOptionsValidation
+                    (not this.minNumOfOptionsValidation.ok)
+                  )
+                }}
+                  <InputTip @validation={{this.minNumOfOptionsValidation}} />
+                {{/if}}
+              </div>
             {{/if}}
           </div>
-        {{/if}}
-      </div>
-    {{/unless}}
+        {{/unless}}
 
-    {{#unless this.rankedChoiceOrRegular}}
-      <div class="options">
-        <div class="input-group poll-number">
-          <label class="input-group-label">{{i18n
-              "poll.ui_builder.poll_config.min"
-            }}</label>
-          <Input
-            @type="number"
-            @value={{this.pollMin}}
-            class="poll-options-min"
-            min="1"
+        {{#unless this.rankedChoiceOrRegular}}
+          <div class="options">
+            <div class="input-group poll-number">
+              <label class="input-group-label">{{i18n
+                  "poll.ui_builder.poll_config.min"
+                }}</label>
+              <Input
+                @type="number"
+                @value={{this.pollMin}}
+                class="poll-options-min"
+                min="1"
+              />
+            </div>
+
+            <div class="input-group poll-number">
+              <label class="input-group-label">{{i18n
+                  "poll.ui_builder.poll_config.max"
+                }}</label>
+              <Input
+                @type="number"
+                @value={{this.pollMax}}
+                class="poll-options-max"
+                min="1"
+              />
+            </div>
+
+            {{#if this.isNumber}}
+              <div class="input-group poll-number">
+                <label class="input-group-label">{{i18n
+                    "poll.ui_builder.poll_config.step"
+                  }}</label>
+                <Input
+                  @type="number"
+                  @value={{this.pollStep}}
+                  min="1"
+                  class="poll-options-step"
+                />
+              </div>
+            {{/if}}
+          </div>
+
+          {{#unless this.minMaxValueValidation.ok}}
+            <InputTip @validation={{this.minMaxValueValidation}} />
+          {{/unless}}
+        {{/unless}}
+
+        <div class="input-group poll-public">
+          <DToggleSwitch
+            @state={{this.publicPoll}}
+            @label="poll.ui_builder.poll_public.label"
+            class="poll-toggle-public"
+            {{on "click" this.togglePublic}}
           />
         </div>
 
-        <div class="input-group poll-number">
-          <label class="input-group-label">{{i18n
-              "poll.ui_builder.poll_config.max"
-            }}</label>
-          <Input
-            @type="number"
-            @value={{this.pollMax}}
-            class="poll-options-max"
-            min="1"
-          />
-        </div>
-
-        {{#if this.isNumber}}
-          <div class="input-group poll-number">
+        {{#if this.showAdvanced}}
+          <div class="input-group poll-allowed-groups">
             <label class="input-group-label">{{i18n
-                "poll.ui_builder.poll_config.step"
+                "poll.ui_builder.poll_groups.label"
               }}</label>
-            <Input
-              @type="number"
-              @value={{this.pollStep}}
-              min="1"
-              class="poll-options-step"
+            <GroupChooser
+              @content={{this.siteGroups}}
+              @value={{this.pollGroups}}
+              @onChange={{fn (mut this.pollGroups)}}
+              @labelProperty="name"
+              @valueProperty="name"
             />
           </div>
+
+          <div class="input-group poll-date">
+            <label class="input-group-label">{{i18n
+                "poll.ui_builder.automatic_close.label"
+              }}</label>
+            <DateTimeInput
+              @date={{this.pollAutoClose}}
+              @onChange={{fn (mut this.pollAutoClose)}}
+              @clearable={{true}}
+              @useGlobalPickerContainer={{true}}
+            />
+          </div>
+
+          <div class="input-group poll-select">
+            <label class="input-group-label">{{i18n
+                "poll.ui_builder.poll_result.label"
+              }}</label>
+            <ComboBox
+              @content={{this.pollResults}}
+              @value={{this.pollResult}}
+              @valueProperty="value"
+              @onChange={{fn (mut this.pollResult)}}
+              class="poll-result"
+            />
+          </div>
+
+          {{#unless this.rankedChoiceOrNumber}}
+            <div class="input-group poll-select column">
+              <label class="input-group-label">{{i18n
+                  "poll.ui_builder.poll_chart_type.label"
+                }}</label>
+
+              <div class="radio-group">
+                <RadioButton
+                  @id="poll-chart-type-bar"
+                  @name="poll-chart-type"
+                  @value="bar"
+                  @selection={{this.chartType}}
+                />
+                <label for="poll-chart-type-bar">{{icon "chart-bar"}}
+                  {{i18n "poll.ui_builder.poll_chart_type.bar"}}</label>
+              </div>
+
+              <div class="radio-group">
+                <RadioButton
+                  @id="poll-chart-type-pie"
+                  @name="poll-chart-type"
+                  @value="pie"
+                  @selection={{this.chartType}}
+                />
+                <label for="poll-chart-type-pie">{{icon "chart-pie"}}
+                  {{i18n "poll.ui_builder.poll_chart_type.pie"}}</label>
+              </div>
+            </div>
+          {{/unless}}
         {{/if}}
-      </div>
-
-      {{#unless this.minMaxValueValidation.ok}}
-        <InputTip @validation={{this.minMaxValueValidation}} />
-      {{/unless}}
-    {{/unless}}
-
-    <div class="input-group poll-public">
-      <DToggleSwitch
-        @state={{this.publicPoll}}
-        @label="poll.ui_builder.poll_public.label"
-        class="poll-toggle-public"
-        {{on "click" this.togglePublic}}
-      />
-    </div>
-
-    {{#if this.showAdvanced}}
-      <div class="input-group poll-allowed-groups">
-        <label class="input-group-label">{{i18n
-            "poll.ui_builder.poll_groups.label"
-          }}</label>
-        <GroupChooser
-          @content={{this.siteGroups}}
-          @value={{this.pollGroups}}
-          @onChange={{fn (mut this.pollGroups)}}
-          @labelProperty="name"
-          @valueProperty="name"
+      </:body>
+      <:footer>
+        <DButton
+          @action={{this.insertPoll}}
+          @icon="chart-bar"
+          @label="poll.ui_builder.insert"
+          @disabled={{this.disableInsert}}
+          class="btn-primary insert-poll"
         />
-      </div>
 
-      <div class="input-group poll-date">
-        <label class="input-group-label">{{i18n
-            "poll.ui_builder.automatic_close.label"
-          }}</label>
-        <DateTimeInput
-          @date={{this.pollAutoClose}}
-          @onChange={{fn (mut this.pollAutoClose)}}
-          @clearable={{true}}
-          @useGlobalPickerContainer={{true}}
+        <DButton @label="cancel" @action={{@closeModal}} class="btn-flat" />
+
+        <DButton
+          @action={{this.toggleAdvanced}}
+          @icon="gear"
+          @title={{if
+            this.showAdvanced
+            "poll.ui_builder.hide_advanced"
+            "poll.ui_builder.show_advanced"
+          }}
+          class="btn-default show-advanced"
         />
-      </div>
 
-      <div class="input-group poll-select">
-        <label class="input-group-label">{{i18n
-            "poll.ui_builder.poll_result.label"
-          }}</label>
-        <ComboBox
-          @content={{this.pollResults}}
-          @value={{this.pollResult}}
-          @valueProperty="value"
-          @onChange={{fn (mut this.pollResult)}}
-          class="poll-result"
-        />
-      </div>
-
-      {{#unless this.rankedChoiceOrNumber}}
-        <div class="input-group poll-select column">
-          <label class="input-group-label">{{i18n
-              "poll.ui_builder.poll_chart_type.label"
-            }}</label>
-
-          <div class="radio-group">
-            <RadioButton
-              @id="poll-chart-type-bar"
-              @name="poll-chart-type"
-              @value="bar"
-              @selection={{this.chartType}}
-            />
-            <label for="poll-chart-type-bar">{{d-icon "chart-bar"}}
-              {{i18n "poll.ui_builder.poll_chart_type.bar"}}</label>
-          </div>
-
-          <div class="radio-group">
-            <RadioButton
-              @id="poll-chart-type-pie"
-              @name="poll-chart-type"
-              @value="pie"
-              @selection={{this.chartType}}
-            />
-            <label for="poll-chart-type-pie">{{d-icon "chart-pie"}}
-              {{i18n "poll.ui_builder.poll_chart_type.pie"}}</label>
-          </div>
-        </div>
-      {{/unless}}
-    {{/if}}
-  </:body>
-  <:footer>
-    <DButton
-      @action={{this.insertPoll}}
-      @icon="chart-bar"
-      @label="poll.ui_builder.insert"
-      @disabled={{this.disableInsert}}
-      class="btn-primary insert-poll"
-    />
-
-    <DButton @label="cancel" @action={{@closeModal}} class="btn-flat" />
-
-    <DButton
-      @action={{this.toggleAdvanced}}
-      @icon="gear"
-      @title={{if
-        this.showAdvanced
-        "poll.ui_builder.hide_advanced"
-        "poll.ui_builder.show_advanced"
-      }}
-      class="btn-default show-advanced"
-    />
-
-  </:footer>
-</DModal>
\ No newline at end of file
+      </:footer>
+    </DModal>
+  </template>
+}
diff --git a/plugins/poll/test/javascripts/component/poll-buttons-dropdown-test.gjs b/plugins/poll/test/javascripts/component/poll-buttons-dropdown-test.gjs
index 11ff94cf969..b40eacd8593 100644
--- a/plugins/poll/test/javascripts/component/poll-buttons-dropdown-test.gjs
+++ b/plugins/poll/test/javascripts/component/poll-buttons-dropdown-test.gjs
@@ -1,13 +1,15 @@
 import { click, render } from "@ember/test-helpers";
-import hbs from "htmlbars-inline-precompile";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import { i18n } from "discourse-i18n";
+import PollButtonsDropdown from "discourse/plugins/poll/discourse/components/poll-buttons-dropdown";
 
 module("Poll | Component | poll-buttons-dropdown", function (hooks) {
   setupRenderingTest(hooks);
 
   test("Renders a clickable dropdown menu with a close option", async function (assert) {
+    const self = this;
+
     this.siteSettings.data_explorer_enabled = true;
     this.siteSettings.poll_export_data_explorer_query_id = 18;
     this.currentUser.setProperties({ admin: true });
@@ -23,16 +25,20 @@ module("Poll | Component | poll-buttons-dropdown", function (hooks) {
       dropDownClick: () => {},
     });
 
-    await render(hbs`<PollButtonsDropdown
-      @closed={{this.closed}}
-      @voters={{this.voters}}
-      @isStaff={{this.isStaff}}
-      @isMe={{this.isMe}}
-      @topicArchived={{this.topicArchived}}
-      @groupableUserFields={{this.groupableUserFields}}
-      @isAutomaticallyClosed={{this.isAutomaticallyClosed}}
-      @dropDownClick={{this.dropDownClick}}
-    />`);
+    await render(
+      <template>
+        <PollButtonsDropdown
+          @closed={{self.closed}}
+          @voters={{self.voters}}
+          @isStaff={{self.isStaff}}
+          @isMe={{self.isMe}}
+          @topicArchived={{self.topicArchived}}
+          @groupableUserFields={{self.groupableUserFields}}
+          @isAutomaticallyClosed={{self.isAutomaticallyClosed}}
+          @dropDownClick={{self.dropDownClick}}
+        />
+      </template>
+    );
 
     await click(".widget-dropdown-header");
 
@@ -46,6 +52,8 @@ module("Poll | Component | poll-buttons-dropdown", function (hooks) {
   });
 
   test("Renders a show-tally button when poll is a bar chart", async function (assert) {
+    const self = this;
+
     this.setProperties({
       closed: false,
       voters: 2,
@@ -58,17 +66,21 @@ module("Poll | Component | poll-buttons-dropdown", function (hooks) {
       availableDisplayMode: "showTally",
     });
 
-    await render(hbs`<PollButtonsDropdown
-      @closed={{this.closed}}
-      @voters={{this.voters}}
-      @isStaff={{this.isStaff}}
-      @isMe={{this.isMe}}
-      @topicArchived={{this.topicArchived}}
-      @groupableUserFields={{this.groupableUserFields}}
-      @isAutomaticallyClosed={{this.isAutomaticallyClosed}}
-      @dropDownClick={{this.dropDownClick}}
-      @availableDisplayMode={{this.availableDisplayMode}}
-    />`);
+    await render(
+      <template>
+        <PollButtonsDropdown
+          @closed={{self.closed}}
+          @voters={{self.voters}}
+          @isStaff={{self.isStaff}}
+          @isMe={{self.isMe}}
+          @topicArchived={{self.topicArchived}}
+          @groupableUserFields={{self.groupableUserFields}}
+          @isAutomaticallyClosed={{self.isAutomaticallyClosed}}
+          @dropDownClick={{self.dropDownClick}}
+          @availableDisplayMode={{self.availableDisplayMode}}
+        />
+      </template>
+    );
 
     await click(".widget-dropdown-header");
 
@@ -82,6 +94,8 @@ module("Poll | Component | poll-buttons-dropdown", function (hooks) {
   });
 
   test("Renders a single button when there is only one authorised action", async function (assert) {
+    const self = this;
+
     this.setProperties({
       closed: false,
       voters: 2,
@@ -93,16 +107,20 @@ module("Poll | Component | poll-buttons-dropdown", function (hooks) {
       dropDownClick: () => {},
     });
 
-    await render(hbs`<PollButtonsDropdown
-      @closed={{this.closed}}
-      @voters={{this.voters}}
-      @isStaff={{this.isStaff}}
-      @isMe={{this.isMe}}
-      @topicArchived={{this.topicArchived}}
-      @groupableUserFields={{this.groupableUserFields}}
-      @isAutomaticallyClosed={{this.isAutomaticallyClosed}}
-      @dropDownClick={{this.dropDownClick}}
-    />`);
+    await render(
+      <template>
+        <PollButtonsDropdown
+          @closed={{self.closed}}
+          @voters={{self.voters}}
+          @isStaff={{self.isStaff}}
+          @isMe={{self.isMe}}
+          @topicArchived={{self.topicArchived}}
+          @groupableUserFields={{self.groupableUserFields}}
+          @isAutomaticallyClosed={{self.isAutomaticallyClosed}}
+          @dropDownClick={{self.dropDownClick}}
+        />
+      </template>
+    );
 
     assert.dom(".widget-dropdown-header").doesNotExist();
     assert.dom("button.widget-button").exists({ count: 1 });
@@ -115,6 +133,8 @@ module("Poll | Component | poll-buttons-dropdown", function (hooks) {
   });
 
   test("Doesn't render a button when user has no authorised actions", async function (assert) {
+    const self = this;
+
     this.setProperties({
       closed: false,
       voters: 0,
@@ -126,16 +146,20 @@ module("Poll | Component | poll-buttons-dropdown", function (hooks) {
       dropDownClick: () => {},
     });
 
-    await render(hbs`<PollButtonsDropdown
-      @closed={{this.closed}}
-      @voters={{this.voters}}
-      @isStaff={{this.isStaff}}
-      @isMe={{this.isMe}}
-      @topicArchived={{this.topicArchived}}
-      @groupableUserFields={{this.groupableUserFields}}
-      @isAutomaticallyClosed={{this.isAutomaticallyClosed}}
-      @dropDownClick={{this.dropDownClick}}
-    />`);
+    await render(
+      <template>
+        <PollButtonsDropdown
+          @closed={{self.closed}}
+          @voters={{self.voters}}
+          @isStaff={{self.isStaff}}
+          @isMe={{self.isMe}}
+          @topicArchived={{self.topicArchived}}
+          @groupableUserFields={{self.groupableUserFields}}
+          @isAutomaticallyClosed={{self.isAutomaticallyClosed}}
+          @dropDownClick={{self.dropDownClick}}
+        />
+      </template>
+    );
 
     assert.dom(".widget-dropdown-header").doesNotExist();
     assert.dom("button.widget-button").doesNotExist();
diff --git a/plugins/poll/test/javascripts/component/poll-info-test.gjs b/plugins/poll/test/javascripts/component/poll-info-test.gjs
index a3c2e07ec46..bd47ac58ac9 100644
--- a/plugins/poll/test/javascripts/component/poll-info-test.gjs
+++ b/plugins/poll/test/javascripts/component/poll-info-test.gjs
@@ -1,8 +1,8 @@
 import { render } from "@ember/test-helpers";
-import hbs from "htmlbars-inline-precompile";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import { i18n } from "discourse-i18n";
+import PollInfo from "discourse/plugins/poll/discourse/components/poll-info";
 
 const OPTIONS = [
   { id: "1ddc47be0d2315b9711ee8526ca9d83f", html: "This", votes: 2, rank: 0 },
@@ -14,6 +14,8 @@ module("Poll | Component | poll-info", function (hooks) {
   setupRenderingTest(hooks);
 
   test("public multiple poll with results anytime", async function (assert) {
+    const self = this;
+
     this.setProperties({
       isMultiple: true,
       min: 1,
@@ -29,20 +31,24 @@ module("Poll | Component | poll-info", function (hooks) {
       voters: [],
     });
 
-    await render(hbs`<PollInfo
-      @options={{this.options}}
-      @min={{this.min}}
-      @max={{this.max}}
-      @isMultiple={{this.isMultiple}}
-      @close={{this.close}}
-      @closed={{this.closed}}
-      @results={{this.results}}
-      @showResults={{this.showResults}}
-      @postUserId={{this.postUserId}}
-      @isPublic={{this.isPublic}}
-      @hasVoted={{this.hasVoted}}
-      @voters={{this.voters}}
-    />`);
+    await render(
+      <template>
+        <PollInfo
+          @options={{self.options}}
+          @min={{self.min}}
+          @max={{self.max}}
+          @isMultiple={{self.isMultiple}}
+          @close={{self.close}}
+          @closed={{self.closed}}
+          @results={{self.results}}
+          @showResults={{self.showResults}}
+          @postUserId={{self.postUserId}}
+          @isPublic={{self.isPublic}}
+          @hasVoted={{self.hasVoted}}
+          @voters={{self.voters}}
+        />
+      </template>
+    );
 
     assert.dom(".poll-info_instructions li.multiple-help-text").hasText(
       i18n("poll.multiple.help.up_to_max_options", {
@@ -60,6 +66,8 @@ module("Poll | Component | poll-info", function (hooks) {
   });
 
   test("public multiple poll with results only shown on vote", async function (assert) {
+    const self = this;
+
     this.setProperties({
       isMultiple: true,
       min: 1,
@@ -75,20 +83,24 @@ module("Poll | Component | poll-info", function (hooks) {
       voters: [],
     });
 
-    await render(hbs`<PollInfo
-      @options={{this.options}}
-      @min={{this.min}}
-      @max={{this.max}}
-      @isMultiple={{this.isMultiple}}
-      @close={{this.close}}
-      @closed={{this.closed}}
-      @results={{this.results}}
-      @showResults={{this.showResults}}
-      @postUserId={{this.postUserId}}
-      @isPublic={{this.isPublic}}
-      @hasVoted={{this.hasVoted}}
-      @voters={{this.voters}}
-    />`);
+    await render(
+      <template>
+        <PollInfo
+          @options={{self.options}}
+          @min={{self.min}}
+          @max={{self.max}}
+          @isMultiple={{self.isMultiple}}
+          @close={{self.close}}
+          @closed={{self.closed}}
+          @results={{self.results}}
+          @showResults={{self.showResults}}
+          @postUserId={{self.postUserId}}
+          @isPublic={{self.isPublic}}
+          @hasVoted={{self.hasVoted}}
+          @voters={{self.voters}}
+        />
+      </template>
+    );
 
     assert.dom(".poll-info_instructions li.multiple-help-text").hasText(
       i18n("poll.multiple.help.up_to_max_options", {
diff --git a/plugins/poll/test/javascripts/component/poll-options-test.gjs b/plugins/poll/test/javascripts/component/poll-options-test.gjs
index 0d8dc61805c..e485d103a53 100644
--- a/plugins/poll/test/javascripts/component/poll-options-test.gjs
+++ b/plugins/poll/test/javascripts/component/poll-options-test.gjs
@@ -1,8 +1,8 @@
 import { click, render } from "@ember/test-helpers";
-import hbs from "htmlbars-inline-precompile";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import { i18n } from "discourse-i18n";
+import PollOptions from "discourse/plugins/poll/discourse/components/poll-options";
 
 const OPTIONS = [
   { id: "1ddc47be0d2315b9711ee8526ca9d83f", html: "This", votes: 0, rank: 0 },
@@ -29,6 +29,8 @@ module("Poll | Component | poll-options", function (hooks) {
   setupRenderingTest(hooks);
 
   test("single, not selected", async function (assert) {
+    const self = this;
+
     this.setProperties({
       isCheckbox: false,
       isRankedChoice: false,
@@ -37,19 +39,25 @@ module("Poll | Component | poll-options", function (hooks) {
       votes: [],
     });
 
-    await render(hbs`<PollOptions
-      @isCheckbox={{this.isCheckbox}}
-      @isRankedChoice={{this.isRankedChoice}}
-      @ranked_choice_dropdown_content={{this.ranked_choice_dropdown_content}}
-      @options={{this.options}}
-      @votes={{this.votes}}
-      @sendRadioClick={{this.toggleOption}}
-    />`);
+    await render(
+      <template>
+        <PollOptions
+          @isCheckbox={{self.isCheckbox}}
+          @isRankedChoice={{self.isRankedChoice}}
+          @ranked_choice_dropdown_content={{self.ranked_choice_dropdown_content}}
+          @options={{self.options}}
+          @votes={{self.votes}}
+          @sendRadioClick={{self.toggleOption}}
+        />
+      </template>
+    );
 
     assert.dom("li .d-icon-far-circle:nth-of-type(1)").exists({ count: 3 });
   });
 
   test("single, selected", async function (assert) {
+    const self = this;
+
     this.setProperties({
       isCheckbox: false,
       isRankedChoice: false,
@@ -58,19 +66,25 @@ module("Poll | Component | poll-options", function (hooks) {
       votes: ["6c986ebcde3d5822a6e91a695c388094"],
     });
 
-    await render(hbs`<PollOptions
-        @isCheckbox={{this.isCheckbox}}
-        @isRankedChoice={{this.isRankedChoice}}
-        @ranked_choice_dropdown_content={{this.ranked_choice_dropdown_content}}
-        @options={{this.options}}
-        @votes={{this.votes}}
-        @sendRadioClick={{this.toggleOption}}
-      />`);
+    await render(
+      <template>
+        <PollOptions
+          @isCheckbox={{self.isCheckbox}}
+          @isRankedChoice={{self.isRankedChoice}}
+          @ranked_choice_dropdown_content={{self.ranked_choice_dropdown_content}}
+          @options={{self.options}}
+          @votes={{self.votes}}
+          @sendRadioClick={{self.toggleOption}}
+        />
+      </template>
+    );
 
     assert.dom("li .d-icon-circle:nth-of-type(1)").exists({ count: 1 });
   });
 
   test("multi, not selected", async function (assert) {
+    const self = this;
+
     this.setProperties({
       isCheckbox: true,
       isRankedChoice: false,
@@ -79,19 +93,25 @@ module("Poll | Component | poll-options", function (hooks) {
       votes: [],
     });
 
-    await render(hbs`<PollOptions
-        @isCheckbox={{this.isCheckbox}}
-        @isRankedChoice={{this.isRankedChoice}}
-        @ranked_choice_dropdown_content={{this.ranked_choice_dropdown_content}}
-        @options={{this.options}}
-        @votes={{this.votes}}
-        @sendRadioClick={{this.toggleOption}}
-      />`);
+    await render(
+      <template>
+        <PollOptions
+          @isCheckbox={{self.isCheckbox}}
+          @isRankedChoice={{self.isRankedChoice}}
+          @ranked_choice_dropdown_content={{self.ranked_choice_dropdown_content}}
+          @options={{self.options}}
+          @votes={{self.votes}}
+          @sendRadioClick={{self.toggleOption}}
+        />
+      </template>
+    );
 
     assert.dom("li .d-icon-far-square:nth-of-type(1)").exists({ count: 3 });
   });
 
   test("multi, selected", async function (assert) {
+    const self = this;
+
     this.setProperties({
       isCheckbox: true,
       isRankedChoice: false,
@@ -100,14 +120,18 @@ module("Poll | Component | poll-options", function (hooks) {
       votes: ["6c986ebcde3d5822a6e91a695c388094"],
     });
 
-    await render(hbs`<PollOptions
-      @isCheckbox={{this.isCheckbox}}
-      @isRankedChoice={{this.isRankedChoice}}
-      @ranked_choice_dropdown_content={{this.ranked_choice_dropdown_content}}
-      @options={{this.options}}
-      @votes={{this.votes}}
-      @sendRadioClick={{this.toggleOption}}
-    />`);
+    await render(
+      <template>
+        <PollOptions
+          @isCheckbox={{self.isCheckbox}}
+          @isRankedChoice={{self.isRankedChoice}}
+          @ranked_choice_dropdown_content={{self.ranked_choice_dropdown_content}}
+          @options={{self.options}}
+          @votes={{self.votes}}
+          @sendRadioClick={{self.toggleOption}}
+        />
+      </template>
+    );
 
     assert
       .dom("li .d-icon-far-square-check:nth-of-type(1)")
@@ -115,23 +139,31 @@ module("Poll | Component | poll-options", function (hooks) {
   });
 
   test("single with images", async function (assert) {
+    const self = this;
+
     this.setProperties({
       isCheckbox: false,
       options: IMAGE_OPTIONS,
       votes: [],
     });
 
-    await render(hbs`<PollOptions
-      @isCheckbox={{this.isCheckbox}}
-      @options={{this.options}}
-      @votes={{this.votes}}
-      @sendRadioClick={{this.toggleOption}}
-    />`);
+    await render(
+      <template>
+        <PollOptions
+          @isCheckbox={{self.isCheckbox}}
+          @options={{self.options}}
+          @votes={{self.votes}}
+          @sendRadioClick={{self.toggleOption}}
+        />
+      </template>
+    );
 
     assert.dom("li img").exists({ count: 2 });
   });
 
   test("ranked choice - priorities", async function (assert) {
+    const self = this;
+
     this.setProperties({
       isCheckbox: false,
       isRankedChoice: true,
@@ -140,14 +172,18 @@ module("Poll | Component | poll-options", function (hooks) {
       votes: [],
     });
 
-    await render(hbs`<PollOptions
-      @isCheckbox={{this.isCheckbox}}
-      @isRankedChoice={{this.isRankedChoice}}
-      @ranked_choice_dropdown_content={{this.ranked_choice_dropdown_content}}
-      @options={{this.options}}
-      @votes={{this.votes}}
-      @sendRadioClick={{this.toggleOption}}
-    />`);
+    await render(
+      <template>
+        <PollOptions
+          @isCheckbox={{self.isCheckbox}}
+          @isRankedChoice={{self.isRankedChoice}}
+          @ranked_choice_dropdown_content={{self.ranked_choice_dropdown_content}}
+          @options={{self.options}}
+          @votes={{self.votes}}
+          @sendRadioClick={{self.toggleOption}}
+        />
+      </template>
+    );
 
     await click(
       `.ranked-choice-poll-option[data-poll-option-id='${OPTIONS[0].id}'] button`
diff --git a/plugins/poll/test/javascripts/component/poll-results-pie-test.gjs b/plugins/poll/test/javascripts/component/poll-results-pie-test.gjs
index 5b943d4ba06..3f80c1ba1c5 100644
--- a/plugins/poll/test/javascripts/component/poll-results-pie-test.gjs
+++ b/plugins/poll/test/javascripts/component/poll-results-pie-test.gjs
@@ -1,7 +1,7 @@
 import { render } from "@ember/test-helpers";
-import hbs from "htmlbars-inline-precompile";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import PollResultsPie from "discourse/plugins/poll/discourse/components/poll-results-pie";
 
 const OPTIONS = [
   { id: "1ddc47be0d2315b9711ee8526ca9d83f", html: "This", votes: 3, rank: 0 },
@@ -15,13 +15,17 @@ module("Poll | Component | poll-results-pie", function (hooks) {
   setupRenderingTest(hooks);
 
   test("Renders the pie chart Component correctly", async function (assert) {
+    const self = this;
+
     this.setProperties({
       id: ID,
       options: OPTIONS,
     });
 
     await render(
-      hbs`<PollResultsPie @id={{this.id}} @options={{this.options}} />`
+      <template>
+        <PollResultsPie @id={{self.id}} @options={{self.options}} />
+      </template>
     );
 
     assert.dom("li.legend").exists({ count: 3 });
diff --git a/plugins/poll/test/javascripts/component/poll-results-ranked-choice-test.gjs b/plugins/poll/test/javascripts/component/poll-results-ranked-choice-test.gjs
index ba14126f7a5..fcd5048a0cb 100644
--- a/plugins/poll/test/javascripts/component/poll-results-ranked-choice-test.gjs
+++ b/plugins/poll/test/javascripts/component/poll-results-ranked-choice-test.gjs
@@ -1,8 +1,8 @@
 import { render } from "@ember/test-helpers";
-import hbs from "htmlbars-inline-precompile";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import { i18n } from "discourse-i18n";
+import PollResultsRankedChoice from "discourse/plugins/poll/discourse/components/poll-results-ranked-choice";
 
 const RANKED_CHOICE_OUTCOME = {
   tied: false,
@@ -34,12 +34,18 @@ module("Poll | Component | poll-results-ranked-choice", function (hooks) {
   setupRenderingTest(hooks);
 
   test("Renders the ranked choice results component correctly", async function (assert) {
+    const self = this;
+
     this.setProperties({
       rankedChoiceOutcome: RANKED_CHOICE_OUTCOME,
     });
 
     await render(
-      hbs`<PollResultsRankedChoice @rankedChoiceOutcome={{this.rankedChoiceOutcome}} />`
+      <template>
+        <PollResultsRankedChoice
+          @rankedChoiceOutcome={{self.rankedChoiceOutcome}}
+        />
+      </template>
     );
 
     assert
@@ -56,10 +62,16 @@ module("Poll | Component | poll-results-ranked-choice", function (hooks) {
   });
 
   test("Renders the ranked choice results component without error when outcome data is empty", async function (assert) {
+    const self = this;
+
     this.rankedChoiceOutcome = null;
 
     await render(
-      hbs`<PollResultsRankedChoice @rankedChoiceOutcome={{this.rankedChoiceOutcome}} />`
+      <template>
+        <PollResultsRankedChoice
+          @rankedChoiceOutcome={{self.rankedChoiceOutcome}}
+        />
+      </template>
     );
 
     assert
diff --git a/plugins/poll/test/javascripts/component/poll-results-standard-test.gjs b/plugins/poll/test/javascripts/component/poll-results-standard-test.gjs
index 789cdada82a..7c4fcaf4ae9 100644
--- a/plugins/poll/test/javascripts/component/poll-results-standard-test.gjs
+++ b/plugins/poll/test/javascripts/component/poll-results-standard-test.gjs
@@ -1,9 +1,9 @@
 import { render } from "@ember/test-helpers";
-import hbs from "htmlbars-inline-precompile";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import { queryAll } from "discourse/tests/helpers/qunit-helpers";
 import { i18n } from "discourse-i18n";
+import PollResultsStandard from "discourse/plugins/poll/discourse/components/poll-results-standard";
 
 const TWO_OPTIONS = [
   { id: "1ddc47be0d2315b9711ee8526ca9d83f", html: "This", votes: 5, rank: 0 },
@@ -38,6 +38,8 @@ module("Poll | Component | poll-results-standard", function (hooks) {
   setupRenderingTest(hooks);
 
   test("Renders the standard results Component correctly", async function (assert) {
+    const self = this;
+
     this.setProperties({
       options: TWO_OPTIONS,
       pollName: "Two Choice Poll",
@@ -50,17 +52,21 @@ module("Poll | Component | poll-results-standard", function (hooks) {
       fetchVoters: () => {},
     });
 
-    await render(hbs`<PollResultsStandard
-      @options={{this.options}}
-      @pollName={{this.pollName}}
-      @pollType={{this.pollType}}
-      @isPublic={{this.isPublic}}
-      @postId={{this.postId}}
-      @vote={{this.vote}}
-      @voters={{this.voters}}
-      @votersCount={{this.votersCount}}
-      @fetchVoters={{this.fetchVoters}}
-    />`);
+    await render(
+      <template>
+        <PollResultsStandard
+          @options={{self.options}}
+          @pollName={{self.pollName}}
+          @pollType={{self.pollType}}
+          @isPublic={{self.isPublic}}
+          @postId={{self.postId}}
+          @vote={{self.vote}}
+          @voters={{self.voters}}
+          @votersCount={{self.votersCount}}
+          @fetchVoters={{self.fetchVoters}}
+        />
+      </template>
+    );
 
     assert.dom(queryAll(".option .percentage")[0]).hasText("56%");
     assert.dom(queryAll(".option .percentage")[1]).hasText("44%");
@@ -68,6 +74,8 @@ module("Poll | Component | poll-results-standard", function (hooks) {
   });
 
   test("Omits voters for private polls", async function (assert) {
+    const self = this;
+
     this.setProperties({
       options: TWO_OPTIONS,
       pollName: "Two Choice Poll",
@@ -80,22 +88,28 @@ module("Poll | Component | poll-results-standard", function (hooks) {
       fetchVoters: () => {},
     });
 
-    await render(hbs`<PollResultsStandard
-      @options={{this.options}}
-      @pollName={{this.pollName}}
-      @pollType={{this.pollType}}
-      @isPublic={{this.isPublic}}
-      @postId={{this.postId}}
-      @vote={{this.vote}}
-      @voters={{this.voters}}
-      @votersCount={{this.votersCount}}
-      @fetchVoters={{this.fetchVoters}}
-    />`);
+    await render(
+      <template>
+        <PollResultsStandard
+          @options={{self.options}}
+          @pollName={{self.pollName}}
+          @pollType={{self.pollType}}
+          @isPublic={{self.isPublic}}
+          @postId={{self.postId}}
+          @vote={{self.vote}}
+          @voters={{self.voters}}
+          @votersCount={{self.votersCount}}
+          @fetchVoters={{self.fetchVoters}}
+        />
+      </template>
+    );
 
     assert.dom("ul.poll-voters-list").doesNotExist();
   });
 
   test("options in ascending order", async function (assert) {
+    const self = this;
+
     this.setProperties({
       options: TWO_OPTIONS_REVERSED,
       pollName: "Two Choice Poll",
@@ -107,22 +121,28 @@ module("Poll | Component | poll-results-standard", function (hooks) {
       fetchVoters: () => {},
     });
 
-    await render(hbs`<PollResultsStandard
-      @options={{this.options}}
-      @pollName={{this.pollName}}
-      @pollType={{this.pollType}}
-      @postId={{this.postId}}
-      @vote={{this.vote}}
-      @voters={{this.voters}}
-      @votersCount={{this.votersCount}}
-      @fetchVoters={{this.fetchVoters}}
-    />`);
+    await render(
+      <template>
+        <PollResultsStandard
+          @options={{self.options}}
+          @pollName={{self.pollName}}
+          @pollType={{self.pollType}}
+          @postId={{self.postId}}
+          @vote={{self.vote}}
+          @voters={{self.voters}}
+          @votersCount={{self.votersCount}}
+          @fetchVoters={{self.fetchVoters}}
+        />
+      </template>
+    );
 
     assert.dom(queryAll(".option .percentage")[0]).hasText("56%");
     assert.dom(queryAll(".option .percentage")[1]).hasText("44%");
   });
 
   test("options in ascending order", async function (assert) {
+    const self = this;
+
     this.setProperties({
       options: FIVE_OPTIONS,
       pollName: "Five Multi Option Poll",
@@ -134,16 +154,20 @@ module("Poll | Component | poll-results-standard", function (hooks) {
       fetchVoters: () => {},
     });
 
-    await render(hbs`<PollResultsStandard
-      @options={{this.options}}
-      @pollName={{this.pollName}}
-      @pollType={{this.pollType}}
-      @postId={{this.postId}}
-      @vote={{this.vote}}
-      @voters={{this.voters}}
-      @votersCount={{this.votersCount}}
-      @fetchVoters={{this.fetchVoters}}
-    />`);
+    await render(
+      <template>
+        <PollResultsStandard
+          @options={{self.options}}
+          @pollName={{self.pollName}}
+          @pollType={{self.pollType}}
+          @postId={{self.postId}}
+          @vote={{self.vote}}
+          @voters={{self.voters}}
+          @votersCount={{self.votersCount}}
+          @fetchVoters={{self.fetchVoters}}
+        />
+      </template>
+    );
 
     let percentages = queryAll(".option .percentage");
     assert.dom(percentages[0]).hasText("41%");
@@ -157,6 +181,8 @@ module("Poll | Component | poll-results-standard", function (hooks) {
   });
 
   test("options in ascending order, showing absolute vote number", async function (assert) {
+    const self = this;
+
     this.setProperties({
       options: FIVE_OPTIONS,
       pollName: "Five Multi Option Poll",
@@ -169,17 +195,21 @@ module("Poll | Component | poll-results-standard", function (hooks) {
       showTally: true,
     });
 
-    await render(hbs`<PollResultsStandard
-      @options={{this.options}}
-      @pollName={{this.pollName}}
-      @pollType={{this.pollType}}
-      @postId={{this.postId}}
-      @vote={{this.vote}}
-      @voters={{this.voters}}
-      @votersCount={{this.votersCount}}
-      @fetchVoters={{this.fetchVoters}}
-      @showTally={{this.showTally}}
-    />`);
+    await render(
+      <template>
+        <PollResultsStandard
+          @options={{self.options}}
+          @pollName={{self.pollName}}
+          @pollType={{self.pollType}}
+          @postId={{self.postId}}
+          @vote={{self.vote}}
+          @voters={{self.voters}}
+          @votersCount={{self.votersCount}}
+          @fetchVoters={{self.fetchVoters}}
+          @showTally={{self.showTally}}
+        />
+      </template>
+    );
 
     let percentages = queryAll(".option .absolute");
     assert.dom(percentages[0]).hasText(i18n("poll.votes", { count: 5 }));
diff --git a/plugins/poll/test/javascripts/component/poll-results-tabs-test.gjs b/plugins/poll/test/javascripts/component/poll-results-tabs-test.gjs
index 6cf080c4506..6a6f72936a9 100644
--- a/plugins/poll/test/javascripts/component/poll-results-tabs-test.gjs
+++ b/plugins/poll/test/javascripts/component/poll-results-tabs-test.gjs
@@ -1,7 +1,7 @@
 import { render } from "@ember/test-helpers";
-import hbs from "htmlbars-inline-precompile";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import PollResultsTabs from "discourse/plugins/poll/discourse/components/poll-results-tabs";
 
 const TWO_OPTIONS = [
   {
@@ -59,6 +59,8 @@ module("Poll | Component | poll-results-tabs", function (hooks) {
   setupRenderingTest(hooks);
 
   test("Renders one tab for non-ranked-choice poll", async function (assert) {
+    const self = this;
+
     this.setProperties({
       options: TWO_OPTIONS,
       pollName: "Two Choice Poll",
@@ -72,23 +74,29 @@ module("Poll | Component | poll-results-tabs", function (hooks) {
       fetchVoters: () => {},
     });
 
-    await render(hbs`<PollResultsTabs
-      @options={{this.options}}
-      @pollName={{this.pollName}}
-      @pollType={{this.pollType}}
-      @isPublic={{this.isPublic}}
-      @isRankedChoice={{this.isRankedChoice}}
-      @postId={{this.postId}}
-      @vote={{this.vote}}
-      @voters={{this.voters}}
-      @votersCount={{this.votersCount}}
-      @fetchVoters={{this.fetchVoters}}
-    />`);
+    await render(
+      <template>
+        <PollResultsTabs
+          @options={{self.options}}
+          @pollName={{self.pollName}}
+          @pollType={{self.pollType}}
+          @isPublic={{self.isPublic}}
+          @isRankedChoice={{self.isRankedChoice}}
+          @postId={{self.postId}}
+          @vote={{self.vote}}
+          @voters={{self.voters}}
+          @votersCount={{self.votersCount}}
+          @fetchVoters={{self.fetchVoters}}
+        />
+      </template>
+    );
 
     assert.dom("li.tab").exists({ count: 1 });
   });
 
   test("Renders two tabs for public ranked choice poll", async function (assert) {
+    const self = this;
+
     this.setProperties({
       options: TWO_OPTIONS,
       pollName: "Two Choice Poll",
@@ -103,24 +111,30 @@ module("Poll | Component | poll-results-tabs", function (hooks) {
       fetchVoters: () => {},
     });
 
-    await render(hbs`<PollResultsTabs
-      @options={{this.options}}
-      @pollName={{this.pollName}}
-      @pollType={{this.pollType}}
-      @isPublic={{this.isPublic}}
-      @isRankedChoice={{this.isRankedChoice}}
-      @rankedChoiceOutcome={{this.rankedChoiceOutcome}}
-      @postId={{this.postId}}
-      @vote={{this.vote}}
-      @voters={{this.voters}}
-      @votersCount={{this.votersCount}}
-      @fetchVoters={{this.fetchVoters}}
-    />`);
+    await render(
+      <template>
+        <PollResultsTabs
+          @options={{self.options}}
+          @pollName={{self.pollName}}
+          @pollType={{self.pollType}}
+          @isPublic={{self.isPublic}}
+          @isRankedChoice={{self.isRankedChoice}}
+          @rankedChoiceOutcome={{self.rankedChoiceOutcome}}
+          @postId={{self.postId}}
+          @vote={{self.vote}}
+          @voters={{self.voters}}
+          @votersCount={{self.votersCount}}
+          @fetchVoters={{self.fetchVoters}}
+        />
+      </template>
+    );
 
     assert.dom("li.tab").exists({ count: 2 });
   });
 
   test("Renders one tab for private ranked choice poll", async function (assert) {
+    const self = this;
+
     this.setProperties({
       options: TWO_OPTIONS,
       pollName: "Two Choice Poll",
@@ -135,19 +149,23 @@ module("Poll | Component | poll-results-tabs", function (hooks) {
       fetchVoters: () => {},
     });
 
-    await render(hbs`<PollResultsTabs
-      @options={{this.options}}
-      @pollName={{this.pollName}}
-      @pollType={{this.pollType}}
-      @isPublic={{this.isPublic}}
-      @isRankedChoice={{this.isRankedChoice}}
-      @rankedChoiceOutcome={{this.rankedChoiceOutcome}}
-      @postId={{this.postId}}
-      @vote={{this.vote}}
-      @voters={{this.voters}}
-      @votersCount={{this.votersCount}}
-      @fetchVoters={{this.fetchVoters}}
-    />`);
+    await render(
+      <template>
+        <PollResultsTabs
+          @options={{self.options}}
+          @pollName={{self.pollName}}
+          @pollType={{self.pollType}}
+          @isPublic={{self.isPublic}}
+          @isRankedChoice={{self.isRankedChoice}}
+          @rankedChoiceOutcome={{self.rankedChoiceOutcome}}
+          @postId={{self.postId}}
+          @vote={{self.vote}}
+          @voters={{self.voters}}
+          @votersCount={{self.votersCount}}
+          @fetchVoters={{self.fetchVoters}}
+        />
+      </template>
+    );
 
     assert.dom("li.tab").exists({ count: 1 });
   });
diff --git a/plugins/poll/test/javascripts/component/poll-test.gjs b/plugins/poll/test/javascripts/component/poll-test.gjs
index 8011a61226e..06d3f38810c 100644
--- a/plugins/poll/test/javascripts/component/poll-test.gjs
+++ b/plugins/poll/test/javascripts/component/poll-test.gjs
@@ -1,11 +1,11 @@
 import EmberObject from "@ember/object";
 import { click, render } from "@ember/test-helpers";
 import { TrackedObject } from "@ember-compat/tracked-built-ins";
-import hbs from "htmlbars-inline-precompile";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import pretender, { response } from "discourse/tests/helpers/create-pretender";
 import { i18n } from "discourse-i18n";
+import Poll from "discourse/plugins/poll/discourse/components/poll";
 
 let requests = 0;
 
@@ -42,6 +42,8 @@ module("Poll | Component | poll", function (hooks) {
   });
 
   test("valid ranks with which you can vote", async function (assert) {
+    const self = this;
+
     this.setProperties({
       post: EmberObject.create({
         id: 42,
@@ -96,13 +98,17 @@ module("Poll | Component | poll", function (hooks) {
       }),
     });
 
-    await render(hbs`<Poll @post={{this.post}} @poll={{this.poll}} />`);
+    await render(
+      <template><Poll @post={{self.post}} @poll={{self.poll}} /></template>
+    );
 
     assert.dom(".poll-buttons .cast-votes:disabled").doesNotExist();
     assert.dom(".poll-buttons .cast-votes").exists();
   });
 
   test("invalid ranks with which you cannot vote", async function (assert) {
+    const self = this;
+
     this.setProperties({
       post: EmberObject.create({
         id: 42,
@@ -141,7 +147,9 @@ module("Poll | Component | poll", function (hooks) {
       }),
     });
 
-    await render(hbs`<Poll @post={{this.post}} @poll={{this.poll}} />`);
+    await render(
+      <template><Poll @post={{self.post}} @poll={{self.poll}} /></template>
+    );
 
     await click(
       ".ranked-choice-poll-option[data-poll-option-id='1f972d1df351de3ce35a787c89faad29'] button",
@@ -171,6 +179,8 @@ module("Poll | Component | poll", function (hooks) {
   });
 
   test("shows vote", async function (assert) {
+    const self = this;
+
     this.setProperties({
       post: EmberObject.create({
         id: 42,
@@ -193,13 +203,17 @@ module("Poll | Component | poll", function (hooks) {
       }),
     });
 
-    await render(hbs`<Poll @post={{this.post}} @poll={{this.poll}} />`);
+    await render(
+      <template><Poll @post={{self.post}} @poll={{self.poll}} /></template>
+    );
 
     assert.dom(".results li:nth-of-type(1) .option p").hasText("100% yes");
     assert.dom(".results li:nth-of-type(2) .option p").hasText("0% no");
   });
 
   test("does not show results after voting when results are to be shown only on closed", async function (assert) {
+    const self = this;
+
     this.setProperties({
       post: EmberObject.create({
         id: 42,
@@ -222,13 +236,17 @@ module("Poll | Component | poll", function (hooks) {
       }),
     });
 
-    await render(hbs`<Poll @post={{this.post}} @poll={{this.poll}} />`);
+    await render(
+      <template><Poll @post={{self.post}} @poll={{self.poll}} /></template>
+    );
 
     assert.dom("ul.options").exists("options are shown");
     assert.dom("ul.results").doesNotExist("results are not shown");
   });
 
   test("can vote", async function (assert) {
+    const self = this;
+
     this.setProperties({
       post: EmberObject.create({
         id: 42,
@@ -251,7 +269,9 @@ module("Poll | Component | poll", function (hooks) {
       }),
     });
 
-    await render(hbs`<Poll @post={{this.post}} @poll={{this.poll}} />`);
+    await render(
+      <template><Poll @post={{self.post}} @poll={{self.poll}} /></template>
+    );
 
     requests = 0;
 
@@ -268,6 +288,8 @@ module("Poll | Component | poll", function (hooks) {
   });
 
   test("cannot vote if not member of the right group", async function (assert) {
+    const self = this;
+
     this.setProperties({
       post: EmberObject.create({
         id: 42,
@@ -291,7 +313,9 @@ module("Poll | Component | poll", function (hooks) {
       }),
     });
 
-    await render(hbs`<Poll @post={{this.post}} @poll={{this.poll}} />`);
+    await render(
+      <template><Poll @post={{self.post}} @poll={{self.poll}} /></template>
+    );
 
     requests = 0;
 
@@ -306,6 +330,8 @@ module("Poll | Component | poll", function (hooks) {
   });
 
   test("voting on a multiple poll with no min attribute", async function (assert) {
+    const self = this;
+
     this.setProperties({
       post: EmberObject.create({
         id: 42,
@@ -328,7 +354,9 @@ module("Poll | Component | poll", function (hooks) {
         chart_type: "bar",
       }),
     });
-    await render(hbs`<Poll @post={{this.post}} @poll={{this.poll}} />`);
+    await render(
+      <template><Poll @post={{self.post}} @poll={{self.poll}} /></template>
+    );
 
     assert.dom(".poll-buttons .cast-votes").isDisabled();
 
diff --git a/plugins/poll/test/javascripts/component/poll-ui-builder-test.gjs b/plugins/poll/test/javascripts/component/poll-ui-builder-test.gjs
index c487abfe4b1..63a602984fb 100644
--- a/plugins/poll/test/javascripts/component/poll-ui-builder-test.gjs
+++ b/plugins/poll/test/javascripts/component/poll-ui-builder-test.gjs
@@ -1,18 +1,22 @@
 import { click, fillIn, render } from "@ember/test-helpers";
-import hbs from "htmlbars-inline-precompile";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
+import PollUiBuilder from "discourse/plugins/poll/discourse/components/modal/poll-ui-builder";
 
-async function setupBuilder(context) {
+async function setupBuilder() {
+  const noop = () => {};
   const results = [];
   const model = {
     toolbarEvent: { getText: () => "", addText: (t) => results.push(t) },
   };
-  context.model = model;
+
   await render(
-    hbs`<Modal::PollUiBuilder @inline={{true}} @model={{this.model}} @closeModal={{fn (mut this.closeCalled) true}} />`
+    <template>
+      <PollUiBuilder @inline={{true}} @model={{model}} @closeModal={{noop}} />
+    </template>
   );
+
   return results;
 }
 
@@ -20,7 +24,7 @@ module("Poll | Component | poll-ui-builder", function (hooks) {
   setupRenderingTest(hooks);
 
   test("Can switch poll type", async function (assert) {
-    await setupBuilder(this);
+    await setupBuilder();
 
     assert.dom(".poll-type-value-regular").hasClass("active");
 
@@ -45,7 +49,7 @@ module("Poll | Component | poll-ui-builder", function (hooks) {
   });
 
   test("Automatically updates min/max when number of options change", async function (assert) {
-    await setupBuilder(this);
+    await setupBuilder();
 
     await click(".poll-type-value-multiple");
     assert.dom(".poll-options-min").hasValue("0");
@@ -65,7 +69,7 @@ module("Poll | Component | poll-ui-builder", function (hooks) {
   test("disables save button", async function (assert) {
     this.siteSettings.poll_maximum_options = 3;
 
-    await setupBuilder(this);
+    await setupBuilder();
     assert
       .dom(".insert-poll")
       .isDisabled("Insert button disabled when no options specified");
@@ -88,7 +92,7 @@ module("Poll | Component | poll-ui-builder", function (hooks) {
   });
 
   test("number mode", async function (assert) {
-    const results = await setupBuilder(this);
+    const results = await setupBuilder();
 
     await click(".show-advanced");
     await click(".poll-type-value-number");
@@ -122,7 +126,7 @@ module("Poll | Component | poll-ui-builder", function (hooks) {
   });
 
   test("regular mode", async function (assert) {
-    const results = await setupBuilder(this);
+    const results = await setupBuilder();
 
     await fillIn(".poll-option-value input", "a");
     await click(".poll-option-add");
@@ -160,7 +164,7 @@ module("Poll | Component | poll-ui-builder", function (hooks) {
   });
 
   test("multi-choice mode", async function (assert) {
-    const results = await setupBuilder(this);
+    const results = await setupBuilder();
 
     await click(".poll-type-value-multiple");
 
@@ -188,7 +192,7 @@ module("Poll | Component | poll-ui-builder", function (hooks) {
   });
 
   test("staff_only option is not present for non-staff", async function (assert) {
-    await setupBuilder(this);
+    await setupBuilder();
 
     await click(".show-advanced");
     const resultVisibility = selectKit(".poll-result");
@@ -215,7 +219,7 @@ module("Poll | Component | poll-ui-builder", function (hooks) {
   test("default public value can be controlled with site setting", async function (assert) {
     this.siteSettings.poll_default_public = false;
 
-    const results = await setupBuilder(this);
+    const results = await setupBuilder();
 
     await fillIn(".poll-option-value input", "a");
     await click(".poll-option-add");
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/color-example.gjs b/plugins/styleguide/assets/javascripts/discourse/components/color-example.gjs
index b946fa36329..647f2ed0ffd 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/color-example.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/color-example.gjs
@@ -1,4 +1,7 @@
-<section class="color-example">
-  <div class="color-bg {{@color}}"></div>
-  <div class="color-name">var(--{{@color}})</div>
-</section>
\ No newline at end of file
+const ColorExample = <template>
+  <section class="color-example">
+    <div class="color-bg {{@color}}"></div>
+    <div class="color-name">var(--{{@color}})</div>
+  </section>
+</template>;
+export default ColorExample;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/01-font-scale.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/01-font-scale.gjs
index 486b23159aa..00a4edc991c 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/01-font-scale.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/01-font-scale.gjs
@@ -1,114 +1,121 @@
-<div class="section-description">
-  <p>
-    Discourse users can select from 4 different text sizes in their user
-    settings, by default these are:
-    <pre>
+import { i18n } from "discourse-i18n";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
+
+const FontScale = <template>
+  <div class="section-description">
+    <p>
+      Discourse users can select from 4 different text sizes in their user
+      settings, by default these are:
+      <pre>
       Smaller: 14px Normal: 15px
       <span
-      >(default)</span>
+        >(default)</span>
       Larger: 17px Largest: 19px
     </pre>
-  </p>
+    </p>
 
-  <p>
-    If you'd like to increase the font size of your entire Discourse community,
-    you can override the font-size of the HTML element. You can also provide
-    different font sizes for the user text size settings defined above. The
-    example below increases all text size options by 1px.
-    <pre>
+    <p>
+      If you'd like to increase the font size of your entire Discourse
+      community, you can override the font-size of the HTML element. You can
+      also provide different font sizes for the user text size settings defined
+      above. The example below increases all text size options by 1px.
+      <pre>
       html {
       <span
-        class="hljs-attribute"
-      >font-size</span>: 16px;
+          class="hljs-attribute"
+        >font-size</span>: 16px;
       <span>// default font-size
-      </span>
+        </span>
       &.text-size-smaller {
       <span
-        class="hljs-attribute"
-      >font-size</span>: 15px; } &.text-size-larger
+          class="hljs-attribute"
+        >font-size</span>: 15px; } &.text-size-larger
       {
       <span
-        class="hljs-attribute"
-      >font-size</span>: 18px; } &.text-size-largest
+          class="hljs-attribute"
+        >font-size</span>: 18px; } &.text-size-largest
       {
       <span
-        class="hljs-attribute"
-      >font-size</span>: 20px; } }
+          class="hljs-attribute"
+        >font-size</span>: 20px; } }
     </pre>
-  </p>
-  <p>
-    If you want to scale the fonts of a specific element, you can use
-    Discourse's font scaling variables. Using the variable system ensures you're
-    using a consistent set of font-sizes throughout your community.
-    <p>
-      Changing the font-size of a parent element will proportionately scale the
-      font sizes of all its children.
     </p>
-    <pre>
+    <p>
+      If you want to scale the fonts of a specific element, you can use
+      Discourse's font scaling variables. Using the variable system ensures
+      you're using a consistent set of font-sizes throughout your community.
+      <p>
+        Changing the font-size of a parent element will proportionately scale
+        the font sizes of all its children.
+      </p>
+      <pre>
       .parent {
       <span
-        class="hljs-attribute"
-      >font-size</span>: var(--font-up-3);
-      <span>// Increases the relative
-        font-size of this element and its children by 3 steps in the scale</span>
+          class="hljs-attribute"
+        >font-size</span>: var(--font-up-3);
+      <span>// Increases the
+          relative font-size of this element and its children by 3 steps in the
+          scale</span>
       .child {
-      <span
-      >// If this is set to var(--font-down-3) in Discourse's default CSS, the
-        parent font-size increase above would make this equivalent to
-        var(--font-0) (var(--font-down-3) + var(--font-up-3) = var(--font-0))</span>
+      <span>// If this is set to
+          var(--font-down-3) in Discourse's default CSS, the parent font-size
+          increase above would make this equivalent to var(--font-0)
+          (var(--font-down-3) + var(--font-up-3) = var(--font-0))</span>
       } }
     </pre>
-  </p>
-</div>
+    </p>
+  </div>
 
-<StyleguideExample @title="var(--font-up-6), 2.296em">
-  <p class="font-up-6">{{i18n "styleguide.sections.typography.example"}}</p>
-</StyleguideExample>
+  <StyleguideExample @title="var(--font-up-6), 2.296em">
+    <p class="font-up-6">{{i18n "styleguide.sections.typography.example"}}</p>
+  </StyleguideExample>
 
-<StyleguideExample @title="var(--font-up-5), 2em">
-  <p class="font-up-5">{{i18n "styleguide.sections.typography.example"}}</p>
-</StyleguideExample>
+  <StyleguideExample @title="var(--font-up-5), 2em">
+    <p class="font-up-5">{{i18n "styleguide.sections.typography.example"}}</p>
+  </StyleguideExample>
 
-<StyleguideExample @title="var(--font-up-4), 1.7511em">
-  <p class="font-up-4">{{i18n "styleguide.sections.typography.example"}}</p>
-</StyleguideExample>
+  <StyleguideExample @title="var(--font-up-4), 1.7511em">
+    <p class="font-up-4">{{i18n "styleguide.sections.typography.example"}}</p>
+  </StyleguideExample>
 
-<StyleguideExample @title="var(--font-up-3), 1.5157em">
-  <p class="font-up-3">{{i18n "styleguide.sections.typography.example"}}</p>
-</StyleguideExample>
+  <StyleguideExample @title="var(--font-up-3), 1.5157em">
+    <p class="font-up-3">{{i18n "styleguide.sections.typography.example"}}</p>
+  </StyleguideExample>
 
-<StyleguideExample @title="var(--font-up-2), 1.3195em">
-  <p class="font-up-2">{{i18n "styleguide.sections.typography.example"}}</p>
-</StyleguideExample>
+  <StyleguideExample @title="var(--font-up-2), 1.3195em">
+    <p class="font-up-2">{{i18n "styleguide.sections.typography.example"}}</p>
+  </StyleguideExample>
 
-<StyleguideExample @title="var(--font-up-1), 1.1487em">
-  <p class="font-up-1">{{i18n "styleguide.sections.typography.example"}}</p>
-</StyleguideExample>
+  <StyleguideExample @title="var(--font-up-1), 1.1487em">
+    <p class="font-up-1">{{i18n "styleguide.sections.typography.example"}}</p>
+  </StyleguideExample>
 
-<StyleguideExample @title="var(--font-0), 1em — base font">
-  <p class="font-0">{{i18n "styleguide.sections.typography.example"}}</p>
-</StyleguideExample>
+  <StyleguideExample @title="var(--font-0), 1em — base font">
+    <p class="font-0">{{i18n "styleguide.sections.typography.example"}}</p>
+  </StyleguideExample>
 
-<StyleguideExample @title="var(--font-down-1), 0.8706em">
-  <p class="font-down-1">{{i18n "styleguide.sections.typography.example"}}</p>
-</StyleguideExample>
+  <StyleguideExample @title="var(--font-down-1), 0.8706em">
+    <p class="font-down-1">{{i18n "styleguide.sections.typography.example"}}</p>
+  </StyleguideExample>
 
-<StyleguideExample @title="var(--font-down-2), 0.7579em">
-  <p class="font-down-2">{{i18n "styleguide.sections.typography.example"}}</p>
-</StyleguideExample>
+  <StyleguideExample @title="var(--font-down-2), 0.7579em">
+    <p class="font-down-2">{{i18n "styleguide.sections.typography.example"}}</p>
+  </StyleguideExample>
 
-<StyleguideExample @title="var(--font-down-3), 0.6599em">
-  <p class="font-down-3">{{i18n "styleguide.sections.typography.example"}}</p>
-</StyleguideExample>
+  <StyleguideExample @title="var(--font-down-3), 0.6599em">
+    <p class="font-down-3">{{i18n "styleguide.sections.typography.example"}}</p>
+  </StyleguideExample>
 
-<StyleguideExample @title="var(--font-down-4), 0.5745em">
-  <p class="font-down-4">{{i18n "styleguide.sections.typography.example"}}</p>
-</StyleguideExample>
+  <StyleguideExample @title="var(--font-down-4), 0.5745em">
+    <p class="font-down-4">{{i18n "styleguide.sections.typography.example"}}</p>
+  </StyleguideExample>
 
-<StyleguideExample @title="var(--font-down-5), 0.5em">
-  <p class="font-down-5">{{i18n "styleguide.sections.typography.example"}}</p>
-</StyleguideExample>
+  <StyleguideExample @title="var(--font-down-5), 0.5em">
+    <p class="font-down-5">{{i18n "styleguide.sections.typography.example"}}</p>
+  </StyleguideExample>
 
-<StyleguideExample @title="var(--font-down-6), 0.4355em">
-  <p class="font-down-6">{{i18n "styleguide.sections.typography.example"}}</p>
-</StyleguideExample>
\ No newline at end of file
+  <StyleguideExample @title="var(--font-down-6), 0.4355em">
+    <p class="font-down-6">{{i18n "styleguide.sections.typography.example"}}</p>
+  </StyleguideExample>
+</template>;
+export default FontScale;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/02-buttons.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/02-buttons.gjs
index a0793e65ead..5ce4c039975 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/02-buttons.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/02-buttons.gjs
@@ -1,175 +1,187 @@
-<StyleguideExample @title=".btn-icon - sizes (large, default, small)">
-  {{#each @dummy.buttonSizes as |bs|}}
-    <DButton
-      @icon="xmark"
-      @translatedTitle={{bs.text}}
-      @disabled={{bs.disabled}}
-      class={{bs.class}}
-    />
-  {{/each}}
-</StyleguideExample>
+import { fn } from "@ember/helper";
+import { on } from "@ember/modifier";
+import { not } from "truth-helpers";
+import DButton from "discourse/components/d-button";
+import DToggleSwitch from "discourse/components/d-toggle-switch";
+import FlatButton from "discourse/components/flat-button";
+import concatClass from "discourse/helpers/concat-class";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
-<StyleguideExample @title=".btn-icon - states">
-  {{#each @dummy.buttonStates as |bs|}}
-    <DButton
-      @icon="xmark"
-      @translatedTitle={{bs.text}}
-      @disabled={{bs.disabled}}
-      class={{bs.class}}
-    />
-  {{/each}}
-</StyleguideExample>
+const Buttons = <template>
+  <StyleguideExample @title=".btn-icon - sizes (large, default, small)">
+    {{#each @dummy.buttonSizes as |bs|}}
+      <DButton
+        @icon="xmark"
+        @translatedTitle={{bs.text}}
+        @disabled={{bs.disabled}}
+        class={{bs.class}}
+      />
+    {{/each}}
+  </StyleguideExample>
 
-<StyleguideExample @title=".btn-text - sizes (large, default, small)">
-  {{#each @dummy.buttonSizes as |bs|}}
-    <DButton
-      @translatedLabel={{bs.text}}
-      @disabled={{bs.disabled}}
-      class={{bs.class}}
-    />
-  {{/each}}
-</StyleguideExample>
+  <StyleguideExample @title=".btn-icon - states">
+    {{#each @dummy.buttonStates as |bs|}}
+      <DButton
+        @icon="xmark"
+        @translatedTitle={{bs.text}}
+        @disabled={{bs.disabled}}
+        class={{bs.class}}
+      />
+    {{/each}}
+  </StyleguideExample>
 
-<StyleguideExample @title=".btn-text - states">
-  {{#each @dummy.buttonStates as |bs|}}
-    <DButton
-      @translatedLabel={{bs.text}}
-      @disabled={{bs.disabled}}
-      class={{bs.class}}
-    />
-  {{/each}}
-</StyleguideExample>
+  <StyleguideExample @title=".btn-text - sizes (large, default, small)">
+    {{#each @dummy.buttonSizes as |bs|}}
+      <DButton
+        @translatedLabel={{bs.text}}
+        @disabled={{bs.disabled}}
+        class={{bs.class}}
+      />
+    {{/each}}
+  </StyleguideExample>
 
-<StyleguideExample
-  @title=".btn-default .btn-icon-text - sizes (large, default, small)"
->
-  {{#each @dummy.buttonSizes as |bs|}}
-    <DButton
-      @icon="plus"
-      @translatedLabel={{bs.text}}
-      @disabled={{bs.disabled}}
-      class={{bs.class}}
-    />
-  {{/each}}
-</StyleguideExample>
+  <StyleguideExample @title=".btn-text - states">
+    {{#each @dummy.buttonStates as |bs|}}
+      <DButton
+        @translatedLabel={{bs.text}}
+        @disabled={{bs.disabled}}
+        class={{bs.class}}
+      />
+    {{/each}}
+  </StyleguideExample>
 
-<StyleguideExample @title=".btn-default .btn-icon-text - states">
-  {{#each @dummy.buttonStates as |bs|}}
-    <DButton
-      @icon="plus"
-      @translatedLabel={{bs.text}}
-      @disabled={{bs.disabled}}
-      class={{bs.class}}
-    />
-  {{/each}}
-</StyleguideExample>
+  <StyleguideExample
+    @title=".btn-default .btn-icon-text - sizes (large, default, small)"
+  >
+    {{#each @dummy.buttonSizes as |bs|}}
+      <DButton
+        @icon="plus"
+        @translatedLabel={{bs.text}}
+        @disabled={{bs.disabled}}
+        class={{bs.class}}
+      />
+    {{/each}}
+  </StyleguideExample>
 
-<StyleguideExample
-  @title=".btn-primary .btn-icon-text - sizes (large, default, small)"
->
-  {{#each @dummy.buttonSizes as |bs|}}
-    <DButton
-      @icon="plus"
-      @translatedLabel={{bs.text}}
-      @disabled={{bs.disabled}}
-      class={{concat-class "btn-primary" bs.class}}
-    />
-  {{/each}}
-</StyleguideExample>
+  <StyleguideExample @title=".btn-default .btn-icon-text - states">
+    {{#each @dummy.buttonStates as |bs|}}
+      <DButton
+        @icon="plus"
+        @translatedLabel={{bs.text}}
+        @disabled={{bs.disabled}}
+        class={{bs.class}}
+      />
+    {{/each}}
+  </StyleguideExample>
 
-<StyleguideExample @title=".btn-primary .btn-icon-text - states">
-  {{#each @dummy.buttonStates as |bs|}}
-    <DButton
-      @icon="plus"
-      @translatedLabel={{bs.text}}
-      @disabled={{bs.disabled}}
-      class={{concat-class "btn-primary" bs.class}}
-    />
-  {{/each}}
-</StyleguideExample>
+  <StyleguideExample
+    @title=".btn-primary .btn-icon-text - sizes (large, default, small)"
+  >
+    {{#each @dummy.buttonSizes as |bs|}}
+      <DButton
+        @icon="plus"
+        @translatedLabel={{bs.text}}
+        @disabled={{bs.disabled}}
+        class={{concatClass "btn-primary" bs.class}}
+      />
+    {{/each}}
+  </StyleguideExample>
 
-<StyleguideExample
-  @title=".btn-danger .btn-icon-text - sizes (large, default, small)"
->
-  {{#each @dummy.buttonSizes as |bs|}}
-    <DButton
-      @icon="trash-can"
-      @translatedLabel={{bs.text}}
-      @disabled={{bs.disabled}}
-      class={{concat-class "btn-danger" bs.class}}
-    />
-  {{/each}}
-</StyleguideExample>
+  <StyleguideExample @title=".btn-primary .btn-icon-text - states">
+    {{#each @dummy.buttonStates as |bs|}}
+      <DButton
+        @icon="plus"
+        @translatedLabel={{bs.text}}
+        @disabled={{bs.disabled}}
+        class={{concatClass "btn-primary" bs.class}}
+      />
+    {{/each}}
+  </StyleguideExample>
 
-<StyleguideExample @title=".btn-danger .btn-icon-text - states">
-  {{#each @dummy.buttonStates as |bs|}}
-    <DButton
-      @icon="trash-can"
-      @translatedLabel={{bs.text}}
-      @disabled={{bs.disabled}}
-      class={{concat-class "btn-danger" bs.class}}
-    />
-  {{/each}}
-</StyleguideExample>
+  <StyleguideExample
+    @title=".btn-danger .btn-icon-text - sizes (large, default, small)"
+  >
+    {{#each @dummy.buttonSizes as |bs|}}
+      <DButton
+        @icon="trash-can"
+        @translatedLabel={{bs.text}}
+        @disabled={{bs.disabled}}
+        class={{concatClass "btn-danger" bs.class}}
+      />
+    {{/each}}
+  </StyleguideExample>
 
-<StyleguideExample @title=".btn-flat - sizes (large, default, small)">
-  {{#each @dummy.buttonSizes as |bs|}}
-    <FlatButton
-      @icon="trash-can"
-      @disabled={{bs.disabled}}
-      @translatedTitle={{bs.title}}
-    />
-  {{/each}}
-</StyleguideExample>
+  <StyleguideExample @title=".btn-danger .btn-icon-text - states">
+    {{#each @dummy.buttonStates as |bs|}}
+      <DButton
+        @icon="trash-can"
+        @translatedLabel={{bs.text}}
+        @disabled={{bs.disabled}}
+        class={{concatClass "btn-danger" bs.class}}
+      />
+    {{/each}}
+  </StyleguideExample>
 
-<StyleguideExample @title=".btn-flat - states">
-  {{#each @dummy.buttonStates as |bs|}}
-    <FlatButton
-      @icon="trash-can"
-      @disabled={{bs.disabled}}
-      @translatedTitle={{bs.title}}
-    />
-  {{/each}}
-</StyleguideExample>
+  <StyleguideExample @title=".btn-flat - sizes (large, default, small)">
+    {{#each @dummy.buttonSizes as |bs|}}
+      <FlatButton
+        @icon="trash-can"
+        @disabled={{bs.disabled}}
+        @translatedTitle={{bs.title}}
+      />
+    {{/each}}
+  </StyleguideExample>
 
-<StyleguideExample
-  @title="<DButton> btn-flat btn-text - sizes (large, default, small)"
->
-  {{#each @dummy.buttonSizes as |bs|}}
-    <DButton
-      @disabled={{bs.disabled}}
-      @translatedLabel={{bs.text}}
-      class={{concat-class "btn-flat" bs.class}}
-    />
-  {{/each}}
-</StyleguideExample>
+  <StyleguideExample @title=".btn-flat - states">
+    {{#each @dummy.buttonStates as |bs|}}
+      <FlatButton
+        @icon="trash-can"
+        @disabled={{bs.disabled}}
+        @translatedTitle={{bs.title}}
+      />
+    {{/each}}
+  </StyleguideExample>
 
-<StyleguideExample @title="<DButton> btn-flat btn-text - states">
-  {{#each @dummy.buttonStates as |bs|}}
-    <DButton
-      @disabled={{bs.disabled}}
-      @translatedLabel={{bs.text}}
-      class={{concat-class "btn-flat" bs.class}}
-    />
-  {{/each}}
-</StyleguideExample>
+  <StyleguideExample
+    @title="<DButton> btn-flat btn-text - sizes (large, default, small)"
+  >
+    {{#each @dummy.buttonSizes as |bs|}}
+      <DButton
+        @disabled={{bs.disabled}}
+        @translatedLabel={{bs.text}}
+        class={{concatClass "btn-flat" bs.class}}
+      />
+    {{/each}}
+  </StyleguideExample>
 
-<StyleguideExample @title="<DToggleSwitch>">
-  <DToggleSwitch
-    @state={{@dummy.toggleSwitchState}}
-    {{on
-      "click"
-      (fn (mut @dummy.toggleSwitchState) (not @dummy.toggleSwitchState))
-    }}
-  />
-  <DToggleSwitch
-    disabled="true"
-    @state={{true}}
-    title="Disabled with state=true"
-  />
-  <DToggleSwitch
-    disabled="true"
-    @state={{false}}
-    title="Disabled with state=false"
-  />
-</StyleguideExample>
\ No newline at end of file
+  <StyleguideExample @title="<DButton> btn-flat btn-text - states">
+    {{#each @dummy.buttonStates as |bs|}}
+      <DButton
+        @disabled={{bs.disabled}}
+        @translatedLabel={{bs.text}}
+        class={{concatClass "btn-flat" bs.class}}
+      />
+    {{/each}}
+  </StyleguideExample>
+
+  <StyleguideExample @title="<DToggleSwitch>">
+    <DToggleSwitch
+      @state={{@dummy.toggleSwitchState}}
+      {{on
+        "click"
+        (fn (mut @dummy.toggleSwitchState) (not @dummy.toggleSwitchState))
+      }}
+    />
+    <DToggleSwitch
+      disabled="true"
+      @state={{true}}
+      title="Disabled with state=true"
+    />
+    <DToggleSwitch
+      disabled="true"
+      @state={{false}}
+      title="Disabled with state=false"
+    />
+  </StyleguideExample>
+</template>;
+export default Buttons;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/03-colors.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/03-colors.gjs
index e4b06cec732..5a75247db61 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/03-colors.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/03-colors.gjs
@@ -1,120 +1,126 @@
-<StyleguideExample @title="primary">
-  <section class="color-row">
-    <ColorExample @color="primary-very-low" />
-    <ColorExample @color="primary-low" />
-    <ColorExample @color="primary-low-mid" />
-  </section>
-  <section class="color-row">
-    <ColorExample @color="primary-medium" />
-    <ColorExample @color="primary-high" />
-    <ColorExample @color="primary" />
-  </section>
-</StyleguideExample>
+import ColorExample from "discourse/plugins/styleguide/discourse/components/color-example";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
-<StyleguideExample @title="primary-100">
-  <section class="color-row">
-    <ColorExample @color="primary-50" />
-    <ColorExample @color="primary-100" />
-    <ColorExample @color="primary-200" />
-    <ColorExample @color="primary-300" />
-    <ColorExample @color="primary-400" />
-    <ColorExample @color="primary-500" />
-  </section>
-  <section class="color-row">
-    <ColorExample @color="primary-600" />
-    <ColorExample @color="primary-700" />
-    <ColorExample @color="primary-800" />
-    <ColorExample @color="primary-900" />
-    <ColorExample @color="primary" />
-  </section>
-</StyleguideExample>
+const Colors = <template>
+  <StyleguideExample @title="primary">
+    <section class="color-row">
+      <ColorExample @color="primary-very-low" />
+      <ColorExample @color="primary-low" />
+      <ColorExample @color="primary-low-mid" />
+    </section>
+    <section class="color-row">
+      <ColorExample @color="primary-medium" />
+      <ColorExample @color="primary-high" />
+      <ColorExample @color="primary" />
+    </section>
+  </StyleguideExample>
 
-<StyleguideExample @title="secondary">
-  <section class="color-row">
-    <ColorExample @color="secondary-low" />
-    <ColorExample @color="secondary-medium" />
-    <ColorExample @color="secondary-high" />
-    <ColorExample @color="secondary" />
-  </section>
-</StyleguideExample>
+  <StyleguideExample @title="primary-100">
+    <section class="color-row">
+      <ColorExample @color="primary-50" />
+      <ColorExample @color="primary-100" />
+      <ColorExample @color="primary-200" />
+      <ColorExample @color="primary-300" />
+      <ColorExample @color="primary-400" />
+      <ColorExample @color="primary-500" />
+    </section>
+    <section class="color-row">
+      <ColorExample @color="primary-600" />
+      <ColorExample @color="primary-700" />
+      <ColorExample @color="primary-800" />
+      <ColorExample @color="primary-900" />
+      <ColorExample @color="primary" />
+    </section>
+  </StyleguideExample>
 
-<StyleguideExample @title="tertiary">
-  <section class="color-row">
-    <ColorExample @color="tertiary-low" />
-    <ColorExample @color="tertiary-medium" />
-    <ColorExample @color="tertiary-high" />
-    <ColorExample @color="tertiary" />
-  </section>
-</StyleguideExample>
+  <StyleguideExample @title="secondary">
+    <section class="color-row">
+      <ColorExample @color="secondary-low" />
+      <ColorExample @color="secondary-medium" />
+      <ColorExample @color="secondary-high" />
+      <ColorExample @color="secondary" />
+    </section>
+  </StyleguideExample>
 
-<StyleguideExample @title="tertiary-100">
-  <section class="color-row">
-    <ColorExample @color="tertiary-50" />
-    <ColorExample @color="tertiary-100" />
-    <ColorExample @color="tertiary-200" />
-    <ColorExample @color="tertiary-300" />
-    <ColorExample @color="tertiary-400" />
-    <ColorExample @color="tertiary-500" />
-  </section>
-  <section class="color-row">
-    <ColorExample @color="tertiary-600" />
-    <ColorExample @color="tertiary-700" />
-    <ColorExample @color="tertiary-800" />
-    <ColorExample @color="tertiary-900" />
-    <ColorExample @color="tertiary" />
-  </section>
-</StyleguideExample>
+  <StyleguideExample @title="tertiary">
+    <section class="color-row">
+      <ColorExample @color="tertiary-low" />
+      <ColorExample @color="tertiary-medium" />
+      <ColorExample @color="tertiary-high" />
+      <ColorExample @color="tertiary" />
+    </section>
+  </StyleguideExample>
 
-<StyleguideExample @title="quaternary">
-  <section class="color-row">
-    <ColorExample @color="quaternary-low" />
-    <ColorExample @color="quaternary" />
-  </section>
-</StyleguideExample>
+  <StyleguideExample @title="tertiary-100">
+    <section class="color-row">
+      <ColorExample @color="tertiary-50" />
+      <ColorExample @color="tertiary-100" />
+      <ColorExample @color="tertiary-200" />
+      <ColorExample @color="tertiary-300" />
+      <ColorExample @color="tertiary-400" />
+      <ColorExample @color="tertiary-500" />
+    </section>
+    <section class="color-row">
+      <ColorExample @color="tertiary-600" />
+      <ColorExample @color="tertiary-700" />
+      <ColorExample @color="tertiary-800" />
+      <ColorExample @color="tertiary-900" />
+      <ColorExample @color="tertiary" />
+    </section>
+  </StyleguideExample>
 
-<StyleguideExample @title="highlight">
-  <section class="color-row">
-    <ColorExample @color="highlight-bg" />
-    <ColorExample @color="highlight" />
-  </section>
-</StyleguideExample>
+  <StyleguideExample @title="quaternary">
+    <section class="color-row">
+      <ColorExample @color="quaternary-low" />
+      <ColorExample @color="quaternary" />
+    </section>
+  </StyleguideExample>
 
-<StyleguideExample @title="danger">
-  <section class="color-row">
-    <ColorExample @color="danger-low" />
-    <ColorExample @color="danger-low-mid" />
-    <ColorExample @color="danger-medium" />
-    <ColorExample @color="danger" />
-  </section>
-</StyleguideExample>
+  <StyleguideExample @title="highlight">
+    <section class="color-row">
+      <ColorExample @color="highlight-bg" />
+      <ColorExample @color="highlight" />
+    </section>
+  </StyleguideExample>
 
-<StyleguideExample @title="success">
-  <section class="color-row">
-    <ColorExample @color="success-low" />
-    <ColorExample @color="success-medium" />
-    <ColorExample @color="success" />
-  </section>
-</StyleguideExample>
+  <StyleguideExample @title="danger">
+    <section class="color-row">
+      <ColorExample @color="danger-low" />
+      <ColorExample @color="danger-low-mid" />
+      <ColorExample @color="danger-medium" />
+      <ColorExample @color="danger" />
+    </section>
+  </StyleguideExample>
 
-<StyleguideExample @title="love">
-  <section class="color-row">
-    <ColorExample @color="love-low" />
-    <ColorExample @color="love" />
-  </section>
-</StyleguideExample>
+  <StyleguideExample @title="success">
+    <section class="color-row">
+      <ColorExample @color="success-low" />
+      <ColorExample @color="success-medium" />
+      <ColorExample @color="success" />
+    </section>
+  </StyleguideExample>
 
-<StyleguideExample @title="header_primary">
-  <section class="color-row">
-    <ColorExample @color="header_background" />
-  </section>
-  <section class="color-row">
-    <ColorExample @color="header_primary" />
-    <ColorExample @color="header_primary-very-high" />
-    <ColorExample @color="header_primary-high" />
-  </section>
-  <section class="color-row">
-    <ColorExample @color="header_primary-medium" />
-    <ColorExample @color="header_primary-low-mid" />
-    <ColorExample @color="header_primary-low" />
-  </section>
-</StyleguideExample>
\ No newline at end of file
+  <StyleguideExample @title="love">
+    <section class="color-row">
+      <ColorExample @color="love-low" />
+      <ColorExample @color="love" />
+    </section>
+  </StyleguideExample>
+
+  <StyleguideExample @title="header_primary">
+    <section class="color-row">
+      <ColorExample @color="header_background" />
+    </section>
+    <section class="color-row">
+      <ColorExample @color="header_primary" />
+      <ColorExample @color="header_primary-very-high" />
+      <ColorExample @color="header_primary-high" />
+    </section>
+    <section class="color-row">
+      <ColorExample @color="header_primary-medium" />
+      <ColorExample @color="header_primary-low-mid" />
+      <ColorExample @color="header_primary-low" />
+    </section>
+  </StyleguideExample>
+</template>;
+export default Colors;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/04-icons.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/04-icons.gjs
index 1e0c69a5634..e128c338e62 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/04-icons.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/04-icons.gjs
@@ -1,25 +1,32 @@
-<div class="section-description">
-  <p>Discourse uses a free set of SVG icons from Font Awesome (<a
-      href="https://fontawesome.com/icons?d=gallery&m=free"
-    >{{i18n "styleguide.sections.icons.full_list"}}</a>).</p>
-  <p>Plugins and themes can add SVG icons to the SVG spritesheet, or replace
-    existing icons entirely.</p>
-  <p>
-    <ul>
-      <li><a
-          href="https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643"
-        >How to use SVG icons in your plugin or theme</a></li>
-      <li><a
-          href="https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736/1"
-        >How to replace Discourse's default icons in a theme</a></li>
-    </ul>
-  </p>
-  <p>By default, all icons have the
-    <pre class="pre-inline">.d-icon</pre>
-    class applied along with a class containing the name of the icon (e.g.,
-    <pre class="pre-inline">.d-icon-link</pre>)</p>
-</div>
+import { i18n } from "discourse-i18n";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
+import StyleguideIcons from "discourse/plugins/styleguide/discourse/components/styleguide-icons";
 
-<StyleguideExample @title="d-icon - all available icons">
-  <StyleguideIcons />
-</StyleguideExample>
\ No newline at end of file
+const Icons = <template>
+  <div class="section-description">
+    <p>Discourse uses a free set of SVG icons from Font Awesome (<a
+        href="https://fontawesome.com/icons?d=gallery&m=free"
+      >{{i18n "styleguide.sections.icons.full_list"}}</a>).</p>
+    <p>Plugins and themes can add SVG icons to the SVG spritesheet, or replace
+      existing icons entirely.</p>
+    <p>
+      <ul>
+        <li><a
+            href="https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643"
+          >How to use SVG icons in your plugin or theme</a></li>
+        <li><a
+            href="https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736/1"
+          >How to replace Discourse's default icons in a theme</a></li>
+      </ul>
+    </p>
+    <p>By default, all icons have the
+      <pre class="pre-inline">.d-icon</pre>
+      class applied along with a class containing the name of the icon (e.g.,
+      <pre class="pre-inline">.d-icon-link</pre>)</p>
+  </div>
+
+  <StyleguideExample @title="d-icon - all available icons">
+    <StyleguideIcons />
+  </StyleguideExample>
+</template>;
+export default Icons;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/05-forms.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/05-forms.gjs
index 3bd2c125a12..72bcf11cc59 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/05-forms.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/05-forms.gjs
@@ -1,274 +1,284 @@
-<h2>Controls</h2>
-<StyleguideExample @title="Input">
-  <Form as |form|>
-    <form.Field @title="Username" @name="username" as |field|>
-      <field.Input placeholder="Username" />
-    </form.Field>
-    <form.Field @title="Age" @name="age" as |field|>
-      <field.Input placeholder="Age" @type="number" @format="small" />
-    </form.Field>
-    <form.Field @title="Website" @name="website" as |field|>
-      <field.Input @before="https://" @after=".com" @format="large" />
-    </form.Field>
-    <form.Field @title="After" @name="after" as |field|>
-      <field.Input @after=".com" />
-    </form.Field>
-    <form.Field @title="Before" @name="before" as |field|>
-      <field.Input @before="https://" />
-    </form.Field>
-    <form.Field
-      @title="Secret"
-      @name="secret"
-      @description="An important password"
-      as |field|
+import { array, fn, hash } from "@ember/helper";
+import Form from "discourse/components/form";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
+
+const Forms = <template>
+  <h2>Controls</h2>
+  <StyleguideExample @title="Input">
+    <Form as |form|>
+      <form.Field @title="Username" @name="username" as |field|>
+        <field.Input placeholder="Username" />
+      </form.Field>
+      <form.Field @title="Age" @name="age" as |field|>
+        <field.Input placeholder="Age" @type="number" @format="small" />
+      </form.Field>
+      <form.Field @title="Website" @name="website" as |field|>
+        <field.Input @before="https://" @after=".com" @format="large" />
+      </form.Field>
+      <form.Field @title="After" @name="after" as |field|>
+        <field.Input @after=".com" />
+      </form.Field>
+      <form.Field @title="Before" @name="before" as |field|>
+        <field.Input @before="https://" />
+      </form.Field>
+      <form.Field
+        @title="Secret"
+        @name="secret"
+        @description="An important password"
+        as |field|
+      >
+        <field.Password />
+      </form.Field>
+    </Form>
+  </StyleguideExample>
+
+  <StyleguideExample @title="Question">
+    <Form as |form|>
+      <form.Field @title="Enabled" @name="enabled" as |field|>
+        <field.Question />
+      </form.Field>
+    </Form>
+  </StyleguideExample>
+
+  <StyleguideExample @title="Toggle">
+    <Form as |form|>
+      <form.Field @title="Enabled" @name="enabled" as |field|>
+        <field.Toggle />
+      </form.Field>
+    </Form>
+  </StyleguideExample>
+
+  <StyleguideExample @title="Composer">
+    <Form as |form|>
+      <form.Field @title="Query" @name="query" as |field|>
+        <field.Composer />
+      </form.Field>
+    </Form>
+  </StyleguideExample>
+
+  <StyleguideExample @title="Code">
+    <Form as |form|>
+      <form.Field @title="Query" @name="query" as |field|>
+        <field.Code />
+      </form.Field>
+    </Form>
+  </StyleguideExample>
+
+  <StyleguideExample @title="Textarea">
+    <Form as |form|>
+      <form.Field @title="Query" @name="query" as |field|>
+        <field.Textarea />
+      </form.Field>
+    </Form>
+  </StyleguideExample>
+
+  <StyleguideExample @title="Select">
+    <Form as |form|>
+      <form.Field @title="Enabled" @name="enabled" as |field|>
+        <field.Select as |select|>
+          <select.Option @value="true">Yes</select.Option>
+          <select.Option @value="false">No</select.Option>
+        </field.Select>
+      </form.Field>
+    </Form>
+  </StyleguideExample>
+
+  <StyleguideExample @title="CheckboxGroup">
+    <Form as |form|>
+      <form.CheckboxGroup
+        @title="I give explicit permission"
+        as |checkboxGroup|
+      >
+        <checkboxGroup.Field
+          @title="Use my email for any purpose."
+          @name="contract"
+          as |field|
+        >
+          <field.Checkbox>Including signing up for services I can't unsubscribe
+            to.</field.Checkbox>
+        </checkboxGroup.Field>
+        <checkboxGroup.Field
+          @title="Sign my soul away."
+          @name="contract2"
+          as |field|
+        >
+          <field.Checkbox>Will severly impact the afterlife experience.</field.Checkbox>
+        </checkboxGroup.Field>
+      </form.CheckboxGroup>
+    </Form>
+  </StyleguideExample>
+
+  <StyleguideExample @title="Image">
+    <Form as |form|>
+      <form.Field @title="Image" @name="image" as |field|>
+        <field.Image @type="avatar" />
+      </form.Field>
+    </Form>
+  </StyleguideExample>
+
+  <StyleguideExample @title="Icon">
+    <Form as |form|>
+      <form.Field @title="Icon" @name="icon" as |field|>
+        <field.Icon />
+      </form.Field>
+    </Form>
+  </StyleguideExample>
+
+  <StyleguideExample @title="Menu">
+    <Form as |form data|>
+      <form.Field @title="Enabled" @name="enabled" as |field|>
+        <field.Menu @selection={{data.enabled}} as |menu|>
+          <menu.Item @value="true">Yes</menu.Item>
+          <menu.Divider />
+          <menu.Item @value="false">No</menu.Item>
+        </field.Menu>
+      </form.Field>
+    </Form>
+  </StyleguideExample>
+
+  <StyleguideExample @title="RadioGroup">
+    <Form as |form|>
+      <form.Field @title="Enabled" @name="enabled" @format="full" as |field|>
+        <field.RadioGroup as |radioGroup|>
+          <radioGroup.Radio @value="true">Yes</radioGroup.Radio>
+          <radioGroup.Radio @value="false" as |radio|>
+            <radio.Title>No</radio.Title>
+            <radio.Description>
+              Choosing no, will make you inelligible for the contest.
+            </radio.Description>
+          </radioGroup.Radio>
+        </field.RadioGroup>
+      </form.Field>
+    </Form>
+  </StyleguideExample>
+
+  <h2>Layout</h2>
+
+  <StyleguideExample @title="Section">
+    <Form as |form|>
+      <form.Section @title="Section title">
+        Content
+      </form.Section>
+    </Form>
+  </StyleguideExample>
+
+  <StyleguideExample @title="Alert">
+    <Form as |form|>
+      <form.Alert @icon="pencil">
+        You can edit this form.
+      </form.Alert>
+    </Form>
+  </StyleguideExample>
+
+  <StyleguideExample @title="InputGroup">
+    <Form as |form|>
+      <form.InputGroup as |inputGroup|>
+        <inputGroup.Field @title="Username" @name="username" as |field|>
+          <field.Input />
+        </inputGroup.Field>
+        <inputGroup.Field @title="Email" @name="email" as |field|>
+          <field.Input />
+        </inputGroup.Field>
+      </form.InputGroup>
+    </Form>
+  </StyleguideExample>
+
+  <StyleguideExample @title="Collection">
+    <Form
+      @data={{hash foo=(array (hash bar=1 baz=2) (hash bar=3 baz=4))}}
+      as |form|
     >
-      <field.Password />
-    </form.Field>
-  </Form>
-</StyleguideExample>
+      <form.Button @action={{fn form.addItemToCollection "foo"}} @icon="plus" />
 
-<StyleguideExample @title="Question">
-  <Form as |form|>
-    <form.Field @title="Enabled" @name="enabled" as |field|>
-      <field.Question />
-    </form.Field>
-  </Form>
-</StyleguideExample>
+      <form.Collection @name="foo" as |collection index|>
+        <form.Row as |row|>
+          <row.Col @size={{6}}>
+            <collection.Field @title="Bar" @name="bar" as |field|>
+              <field.Input />
+            </collection.Field>
+          </row.Col>
 
-<StyleguideExample @title="Toggle">
-  <Form as |form|>
-    <form.Field @title="Enabled" @name="enabled" as |field|>
-      <field.Toggle />
-    </form.Field>
-  </Form>
-</StyleguideExample>
+          <row.Col @size={{4}}>
+            <collection.Field @title="Baz" @name="baz" as |field|>
+              <field.Input />
+            </collection.Field>
+          </row.Col>
 
-<StyleguideExample @title="Composer">
-  <Form as |form|>
-    <form.Field @title="Query" @name="query" as |field|>
-      <field.Composer />
-    </form.Field>
-  </Form>
-</StyleguideExample>
+          <row.Col @size={{2}}>
+            <form.Button @action={{fn collection.remove index}} @icon="minus" />
+          </row.Col>
+        </form.Row>
+      </form.Collection>
 
-<StyleguideExample @title="Code">
-  <Form as |form|>
-    <form.Field @title="Query" @name="query" as |field|>
-      <field.Code />
-    </form.Field>
-  </Form>
-</StyleguideExample>
+    </Form>
+  </StyleguideExample>
 
-<StyleguideExample @title="Textarea">
-  <Form as |form|>
-    <form.Field @title="Query" @name="query" as |field|>
-      <field.Textarea />
-    </form.Field>
-  </Form>
-</StyleguideExample>
-
-<StyleguideExample @title="Select">
-  <Form as |form|>
-    <form.Field @title="Enabled" @name="enabled" as |field|>
-      <field.Select as |select|>
-        <select.Option @value="true">Yes</select.Option>
-        <select.Option @value="false">No</select.Option>
-      </field.Select>
-    </form.Field>
-  </Form>
-</StyleguideExample>
-
-<StyleguideExample @title="CheckboxGroup">
-  <Form as |form|>
-    <form.CheckboxGroup @title="I give explicit permission" as |checkboxGroup|>
-      <checkboxGroup.Field
-        @title="Use my email for any purpose."
-        @name="contract"
-        as |field|
-      >
-        <field.Checkbox>Including signing up for services I can't unsubscribe
-          to.</field.Checkbox>
-      </checkboxGroup.Field>
-      <checkboxGroup.Field
-        @title="Sign my soul away."
-        @name="contract2"
-        as |field|
-      >
-        <field.Checkbox>Will severly impact the afterlife experience.</field.Checkbox>
-      </checkboxGroup.Field>
-    </form.CheckboxGroup>
-  </Form>
-</StyleguideExample>
-
-<StyleguideExample @title="Image">
-  <Form as |form|>
-    <form.Field @title="Image" @name="image" as |field|>
-      <field.Image @type="avatar" />
-    </form.Field>
-  </Form>
-</StyleguideExample>
-
-<StyleguideExample @title="Icon">
-  <Form as |form|>
-    <form.Field @title="Icon" @name="icon" as |field|>
-      <field.Icon />
-    </form.Field>
-  </Form>
-</StyleguideExample>
-
-<StyleguideExample @title="Menu">
-  <Form as |form data|>
-    <form.Field @title="Enabled" @name="enabled" as |field|>
-      <field.Menu @selection={{data.enabled}} as |menu|>
-        <menu.Item @value="true">Yes</menu.Item>
-        <menu.Divider />
-        <menu.Item @value="false">No</menu.Item>
-      </field.Menu>
-    </form.Field>
-  </Form>
-</StyleguideExample>
-
-<StyleguideExample @title="RadioGroup">
-  <Form as |form|>
-    <form.Field @title="Enabled" @name="enabled" @format="full" as |field|>
-      <field.RadioGroup as |radioGroup|>
-        <radioGroup.Radio @value="true">Yes</radioGroup.Radio>
-        <radioGroup.Radio @value="false" as |radio|>
-          <radio.Title>No</radio.Title>
-          <radio.Description>
-            Choosing no, will make you inelligible for the contest.
-          </radio.Description>
-        </radioGroup.Radio>
-      </field.RadioGroup>
-    </form.Field>
-  </Form>
-</StyleguideExample>
-
-<h2>Layout</h2>
-
-<StyleguideExample @title="Section">
-  <Form as |form|>
-    <form.Section @title="Section title">
-      Content
-    </form.Section>
-  </Form>
-</StyleguideExample>
-
-<StyleguideExample @title="Alert">
-  <Form as |form|>
-    <form.Alert @icon="pencil">
-      You can edit this form.
-    </form.Alert>
-  </Form>
-</StyleguideExample>
-
-<StyleguideExample @title="InputGroup">
-  <Form as |form|>
-    <form.InputGroup as |inputGroup|>
-      <inputGroup.Field @title="Username" @name="username" as |field|>
-        <field.Input />
-      </inputGroup.Field>
-      <inputGroup.Field @title="Email" @name="email" as |field|>
-        <field.Input />
-      </inputGroup.Field>
-    </form.InputGroup>
-  </Form>
-</StyleguideExample>
-
-<StyleguideExample @title="Collection">
-  <Form
-    @data={{hash foo=(array (hash bar=1 baz=2) (hash bar=3 baz=4))}}
-    as |form|
-  >
-    <form.Button @action={{fn form.addItemToCollection "foo"}} @icon="plus" />
-
-    <form.Collection @name="foo" as |collection index|>
+  <StyleguideExample @title="Row/Col">
+    <Form as |form|>
       <form.Row as |row|>
         <row.Col @size={{6}}>
-          <collection.Field @title="Bar" @name="bar" as |field|>
+          <form.Field
+            @title="Username"
+            @name="username"
+            @validation="required"
+            as |field|
+          >
             <field.Input />
-          </collection.Field>
+          </form.Field>
         </row.Col>
-
         <row.Col @size={{4}}>
-          <collection.Field @title="Baz" @name="baz" as |field|>
+          <form.Field @title="Email" @name="email" as |field|>
             <field.Input />
-          </collection.Field>
+          </form.Field>
         </row.Col>
-
         <row.Col @size={{2}}>
-          <form.Button @action={{fn collection.remove index}} @icon="minus" />
+          <form.Submit />
         </row.Col>
       </form.Row>
-    </form.Collection>
+    </Form>
+  </StyleguideExample>
 
-  </Form>
-</StyleguideExample>
+  <StyleguideExample @title="Multiline">
+    <Form as |form|>
+      <form.Row as |row|>
+        <row.Col @size={{6}}>
+          <form.Field
+            @title="Username"
+            @name="username"
+            @validation="required"
+            as |field|
+          >
+            <field.Input />
+          </form.Field>
+        </row.Col>
+        <row.Col @size={{6}}>
+          <form.Field @title="Email" @name="email" as |field|>
+            <field.Input />
+          </form.Field>
+        </row.Col>
 
-<StyleguideExample @title="Row/Col">
-  <Form as |form|>
-    <form.Row as |row|>
-      <row.Col @size={{6}}>
-        <form.Field
-          @title="Username"
-          @name="username"
-          @validation="required"
-          as |field|
-        >
-          <field.Input />
-        </form.Field>
-      </row.Col>
-      <row.Col @size={{4}}>
-        <form.Field @title="Email" @name="email" as |field|>
-          <field.Input />
-        </form.Field>
-      </row.Col>
-      <row.Col @size={{2}}>
-        <form.Submit />
-      </row.Col>
-    </form.Row>
-  </Form>
-</StyleguideExample>
+        <row.Col @size={{12}}>
+          <form.Field @title="Adress" @name="adress" as |field|>
+            <field.Input />
+          </form.Field>
+        </row.Col>
+      </form.Row>
+    </Form>
+  </StyleguideExample>
 
-<StyleguideExample @title="Multiline">
-  <Form as |form|>
-    <form.Row as |row|>
-      <row.Col @size={{6}}>
-        <form.Field
-          @title="Username"
-          @name="username"
-          @validation="required"
-          as |field|
-        >
-          <field.Input />
-        </form.Field>
-      </row.Col>
-      <row.Col @size={{6}}>
-        <form.Field @title="Email" @name="email" as |field|>
-          <field.Input />
-        </form.Field>
-      </row.Col>
+  <h2>Validation</h2>
 
-      <row.Col @size={{12}}>
-        <form.Field @title="Adress" @name="adress" as |field|>
-          <field.Input />
-        </form.Field>
-      </row.Col>
-    </form.Row>
-  </Form>
-</StyleguideExample>
-
-<h2>Validation</h2>
-
-<StyleguideExample @title="Input">
-  <Form @validateOn="change" as |form|>
-    <form.Field
-      @title="Username"
-      @name="username"
-      @validation="required"
-      as |field|
-    >
-      <field.Input />
-    </form.Field>
-  </Form>
-</StyleguideExample>
\ No newline at end of file
+  <StyleguideExample @title="Input">
+    <Form @validateOn="change" as |form|>
+      <form.Field
+        @title="Username"
+        @name="username"
+        @validation="required"
+        as |field|
+      >
+        <field.Input />
+      </form.Field>
+    </Form>
+  </StyleguideExample>
+</template>;
+export default Forms;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/06-spinners.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/06-spinners.gjs
index e78d70185ad..0b0d9735b29 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/06-spinners.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/06-spinners.gjs
@@ -1,7 +1,12 @@
-<StyleguideExample @title="spinner - small">
-  <div class="spinner small"></div>
-</StyleguideExample>
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
-<StyleguideExample @title="spinner - regular">
-  <div class="spinner"></div>
-</StyleguideExample>
\ No newline at end of file
+const Spinners = <template>
+  <StyleguideExample @title="spinner - small">
+    <div class="spinner small"></div>
+  </StyleguideExample>
+
+  <StyleguideExample @title="spinner - regular">
+    <div class="spinner"></div>
+  </StyleguideExample>
+</template>;
+export default Spinners;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/date-time-inputs.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/date-time-inputs.gjs
index 64a848d0080..0fe9b0ee03f 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/date-time-inputs.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/date-time-inputs.gjs
@@ -1,29 +1,41 @@
-<StyleguideExample @title="<TimeInput>">
-  <TimeInput />
-</StyleguideExample>
+import DateInput from "discourse/components/date-input";
+import DatePicker from "discourse/components/date-picker";
+import DateTimeInput from "discourse/components/date-time-input";
+import DateTimeInputRange from "discourse/components/date-time-input-range";
+import FutureDateInput from "discourse/components/future-date-input";
+import TimeInput from "discourse/components/time-input";
+import CalendarDateTimeInput from "discourse/plugins/styleguide/discourse/components/styleguide/calendar-date-time-input";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
-<StyleguideExample @title="<DateInput>">
-  <DateInput />
-</StyleguideExample>
+const DateTimeInputs = <template>
+  <StyleguideExample @title="<TimeInput>">
+    <TimeInput />
+  </StyleguideExample>
 
-<StyleguideExample @title="<DateTimeInput>">
-  <DateTimeInput @clearable={{true}} />
-</StyleguideExample>
+  <StyleguideExample @title="<DateInput>">
+    <DateInput />
+  </StyleguideExample>
 
-<StyleguideExample @title="<DateTimeInputRange>">
-  <DateTimeInputRange />
-</StyleguideExample>
+  <StyleguideExample @title="<DateTimeInput>">
+    <DateTimeInput @clearable={{true}} />
+  </StyleguideExample>
 
-<StyleguideExample @title="<DateTimeInputRange>">
-  <DateTimeInputRange @showFromTime={{false}} @showToTime={{false}} />
-</StyleguideExample>
+  <StyleguideExample @title="<DateTimeInputRange>">
+    <DateTimeInputRange />
+  </StyleguideExample>
 
-<StyleguideExample @title="<FutureDateInput>">
-  <FutureDateInput @displayLabelIcon="far-clock" @clearable={{true}} />
-</StyleguideExample>
+  <StyleguideExample @title="<DateTimeInputRange>">
+    <DateTimeInputRange @showFromTime={{false}} @showToTime={{false}} />
+  </StyleguideExample>
 
-<StyleguideExample @title="<DatePicker>">
-  <DatePicker @defaultDate="YYYY-MM-DD" />
-</StyleguideExample>
+  <StyleguideExample @title="<FutureDateInput>">
+    <FutureDateInput @displayLabelIcon="far-clock" @clearable={{true}} />
+  </StyleguideExample>
 
-<Styleguide::CalendarDateTimeInput />
\ No newline at end of file
+  <StyleguideExample @title="<DatePicker>">
+    <DatePicker @defaultDate="YYYY-MM-DD" />
+  </StyleguideExample>
+
+  <CalendarDateTimeInput />
+</template>;
+export default DateTimeInputs;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/dropdowns.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/dropdowns.gjs
index c54efbde7c0..0a1b681cc6d 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/dropdowns.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/dropdowns.gjs
@@ -1,154 +1,178 @@
-<StyleguideExample
-  @title="<ComboBox>"
-  @initialValue={{get @dummy "options.0.name"}}
-  as |value|
->
-  <ComboBox
-    @content={{@dummy.options}}
-    @value={{value}}
-    @onChange={{fn (mut value)}}
-  />
-</StyleguideExample>
+import { fn, get, hash } from "@ember/helper";
+import CategoryNotificationsTracking from "discourse/components/category-notifications-tracking";
+import TopicNotificationsTracking from "discourse/components/topic-notifications-tracking";
+import CategoriesAdminDropdown from "select-kit/components/categories-admin-dropdown";
+import CategoryChooser from "select-kit/components/category-chooser";
+import ComboBox from "select-kit/components/combo-box";
+import DropdownSelectBox from "select-kit/components/dropdown-select-box";
+import FutureDateInputSelector from "select-kit/components/future-date-input-selector";
+import GroupChooser from "select-kit/components/group-chooser";
+import IconPicker from "select-kit/components/icon-picker";
+import ListSetting from "select-kit/components/list-setting";
+import MiniTagChooser from "select-kit/components/mini-tag-chooser";
+import MultiSelect from "select-kit/components/multi-select";
+import PinnedButton from "select-kit/components/pinned-button";
+import PinnedOptions from "select-kit/components/pinned-options";
+import UserNotificationsDropdown from "select-kit/components/user-notifications-dropdown";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
-<StyleguideExample
-  @title="filterable <ComboBox>"
-  @initialValue={{get @dummy "categories.0.name"}}
-  as |value|
->
-  <ComboBox
-    @content={{@dummy.categories}}
-    @value={{value}}
-    @options={{hash filterable=true}}
-    @onChange={{fn (mut value)}}
-  />
-</StyleguideExample>
+const Dropdowns = <template>
+  <StyleguideExample
+    @title="<ComboBox>"
+    @initialValue={{get @dummy "options.0.name"}}
+    as |value|
+  >
+    <ComboBox
+      @content={{@dummy.options}}
+      @value={{value}}
+      @onChange={{fn (mut value)}}
+    />
+  </StyleguideExample>
 
-<StyleguideExample
-  @title="<ComboBox> with a default state"
-  @initialValue={{get @dummy "options.0.name"}}
-  as |value|
->
-  <ComboBox
-    @content={{@dummy.options}}
-    @value={{value}}
-    @options={{hash none="category.none"}}
-    @onChange={{fn (mut value)}}
-  />
-</StyleguideExample>
-
-<StyleguideExample
-  @title="<ComboBox> clearable"
-  @initialValue={{get @dummy "options.0.name"}}
-  as |value|
->
-  <ComboBox
-    @content={{@dummy.options}}
-    @clearable={{true}}
-    @value={{value}}
-    @options={{hash none="category.none"}}
-    @onChange={{fn (mut value)}}
-  />
-</StyleguideExample>
-
-<StyleguideExample
-  @title="<TopicNotificationsTracking>"
-  @initialValue={{1}}
-  as |value|
->
-  <TopicNotificationsTracking @levelId={{value}} @onChange={{fn (mut value)}} />
-</StyleguideExample>
-
-<StyleguideExample
-  @title="<CategoryChooser>"
-  @initialValue={{get @categories "0" "name"}}
-  as |value|
->
-  <CategoryChooser @value={{value}} @onChange={{fn (mut value)}} />
-</StyleguideExample>
-
-<StyleguideExample @title="<PinnedButton>">
-  <PinnedButton @topic={{@dummy.pinnedTopic}} />
-</StyleguideExample>
-
-<StyleguideExample @title="<PinnedOptions>">
-  <PinnedOptions @topic={{@dummy.pinnedTopic}} />
-</StyleguideExample>
-
-<StyleguideExample @title="<CategoriesAdminDropdown>">
-  <CategoriesAdminDropdown @onChange={{@dummyAction}} />
-</StyleguideExample>
-
-<StyleguideExample @title="<CategoryNotificationsTracking>">
-  <CategoryNotificationsTracking @levelId={{1}} @onChange={{@dummyAction}} />
-</StyleguideExample>
-
-<StyleguideExample @title="<DropdownSelectBox>">
-  <DropdownSelectBox
-    @content={{@dummy.options}}
-    @onChange={{@dummyAction}}
-    @options={{hash translatedNone="Something"}}
-  />
-</StyleguideExample>
-
-<StyleguideExample @title="<FutureDateInputSelector>">
-  <FutureDateInputSelector
-    @input={{@dummy.topicTimerUpdateDate}}
-    @includeWeekend={{true}}
-    @includeForever={{true}}
-    @options={{hash none="time_shortcut.select_timeframe"}}
-  />
-</StyleguideExample>
-
-<StyleguideExample @title="<MultiSelect>">
-  <MultiSelect @content={{@dummy.options}} @onChange={{@dummyAction}} />
-</StyleguideExample>
-
-<StyleguideExample @title="<MiniTagChooser>">
-  <div class="inline-form">
-    <MiniTagChooser
-      @value={{@dummy.selectedTags}}
+  <StyleguideExample
+    @title="filterable <ComboBox>"
+    @initialValue={{get @dummy "categories.0.name"}}
+    as |value|
+  >
+    <ComboBox
+      @content={{@dummy.categories}}
+      @value={{value}}
       @options={{hash filterable=true}}
+      @onChange={{fn (mut value)}}
     />
-  </div>
-</StyleguideExample>
+  </StyleguideExample>
 
-<StyleguideExample @title="<MiniTagChooser> with useHeaderFilter=true">
-  <div class="inline-form">
-    <MiniTagChooser
-      @value={{@dummy.selectedTags}}
-      @options={{hash
-        filterable=true
-        filterPlaceholder="tagging.choose_for_topic"
-        useHeaderFilter=true
-      }}
+  <StyleguideExample
+    @title="<ComboBox> with a default state"
+    @initialValue={{get @dummy "options.0.name"}}
+    as |value|
+  >
+    <ComboBox
+      @content={{@dummy.options}}
+      @value={{value}}
+      @options={{hash none="category.none"}}
+      @onChange={{fn (mut value)}}
     />
-  </div>
-</StyleguideExample>
+  </StyleguideExample>
 
-<StyleguideExample @title="admin <GroupChooser>">
-  <GroupChooser
-    @selected={{@dummy.selectedGroups}}
-    @content={{@dummy.groups}}
-    @onChange={{@dummyAction}}
-  />
-</StyleguideExample>
+  <StyleguideExample
+    @title="<ComboBox> clearable"
+    @initialValue={{get @dummy "options.0.name"}}
+    as |value|
+  >
+    <ComboBox
+      @content={{@dummy.options}}
+      @clearable={{true}}
+      @value={{value}}
+      @options={{hash none="category.none"}}
+      @onChange={{fn (mut value)}}
+    />
+  </StyleguideExample>
 
-<StyleguideExample @title="<ListSetting>">
-  <ListSetting @settingValue={{@dummy.settings}} @onChange={{@dummyAction}} />
-</StyleguideExample>
+  <StyleguideExample
+    @title="<TopicNotificationsTracking>"
+    @initialValue={{1}}
+    as |value|
+  >
+    <TopicNotificationsTracking
+      @levelId={{value}}
+      @onChange={{fn (mut value)}}
+    />
+  </StyleguideExample>
 
-<StyleguideExample @title="<ListSetting>">
-  <ListSetting
-    @settingValue={{@dummy.colors}}
-    @nameProperty="color"
-    @onChange={{@dummyAction}}
-  />
-</StyleguideExample>
+  <StyleguideExample
+    @title="<CategoryChooser>"
+    @initialValue={{get @categories "0" "name"}}
+    as |value|
+  >
+    <CategoryChooser @value={{value}} @onChange={{fn (mut value)}} />
+  </StyleguideExample>
 
-<StyleguideExample @title="<UserNotificationsDropdown>">
-  <UserNotificationsDropdown @user={{@currentUser}} @value="changeToNormal" />
-</StyleguideExample>
+  <StyleguideExample @title="<PinnedButton>">
+    <PinnedButton @topic={{@dummy.pinnedTopic}} />
+  </StyleguideExample>
 
-<StyleguideExample @title="<IconPicker>">
-  <IconPicker @name="icon" />
-</StyleguideExample>
\ No newline at end of file
+  <StyleguideExample @title="<PinnedOptions>">
+    <PinnedOptions @topic={{@dummy.pinnedTopic}} />
+  </StyleguideExample>
+
+  <StyleguideExample @title="<CategoriesAdminDropdown>">
+    <CategoriesAdminDropdown @onChange={{@dummyAction}} />
+  </StyleguideExample>
+
+  <StyleguideExample @title="<CategoryNotificationsTracking>">
+    <CategoryNotificationsTracking @levelId={{1}} @onChange={{@dummyAction}} />
+  </StyleguideExample>
+
+  <StyleguideExample @title="<DropdownSelectBox>">
+    <DropdownSelectBox
+      @content={{@dummy.options}}
+      @onChange={{@dummyAction}}
+      @options={{hash translatedNone="Something"}}
+    />
+  </StyleguideExample>
+
+  <StyleguideExample @title="<FutureDateInputSelector>">
+    <FutureDateInputSelector
+      @input={{@dummy.topicTimerUpdateDate}}
+      @includeWeekend={{true}}
+      @includeForever={{true}}
+      @options={{hash none="time_shortcut.select_timeframe"}}
+    />
+  </StyleguideExample>
+
+  <StyleguideExample @title="<MultiSelect>">
+    <MultiSelect @content={{@dummy.options}} @onChange={{@dummyAction}} />
+  </StyleguideExample>
+
+  <StyleguideExample @title="<MiniTagChooser>">
+    <div class="inline-form">
+      <MiniTagChooser
+        @value={{@dummy.selectedTags}}
+        @options={{hash filterable=true}}
+      />
+    </div>
+  </StyleguideExample>
+
+  <StyleguideExample @title="<MiniTagChooser> with useHeaderFilter=true">
+    <div class="inline-form">
+      <MiniTagChooser
+        @value={{@dummy.selectedTags}}
+        @options={{hash
+          filterable=true
+          filterPlaceholder="tagging.choose_for_topic"
+          useHeaderFilter=true
+        }}
+      />
+    </div>
+  </StyleguideExample>
+
+  <StyleguideExample @title="admin <GroupChooser>">
+    <GroupChooser
+      @selected={{@dummy.selectedGroups}}
+      @content={{@dummy.groups}}
+      @onChange={{@dummyAction}}
+    />
+  </StyleguideExample>
+
+  <StyleguideExample @title="<ListSetting>">
+    <ListSetting @settingValue={{@dummy.settings}} @onChange={{@dummyAction}} />
+  </StyleguideExample>
+
+  <StyleguideExample @title="<ListSetting>">
+    <ListSetting
+      @settingValue={{@dummy.colors}}
+      @nameProperty="color"
+      @onChange={{@dummyAction}}
+    />
+  </StyleguideExample>
+
+  <StyleguideExample @title="<UserNotificationsDropdown>">
+    <UserNotificationsDropdown @user={{@currentUser}} @value="changeToNormal" />
+  </StyleguideExample>
+
+  <StyleguideExample @title="<IconPicker>">
+    <IconPicker @name="icon" />
+  </StyleguideExample>
+</template>;
+export default Dropdowns;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/topic-link.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/topic-link.gjs
index fc67fae23e1..ee0266a594e 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/topic-link.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/topic-link.gjs
@@ -1,3 +1,9 @@
-<StyleguideExample @title="topic-link">
-  {{topic-link @dummy.topic}}
-</StyleguideExample>
\ No newline at end of file
+import topicLink from "discourse/helpers/topic-link";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
+
+const TopicLink = <template>
+  <StyleguideExample @title="topic-link">
+    {{topicLink @dummy.topic}}
+  </StyleguideExample>
+</template>;
+export default TopicLink;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/topic-statuses.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/topic-statuses.gjs
index 710aa905be8..a06f0c61ee2 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/topic-statuses.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/topic-statuses.gjs
@@ -1,27 +1,33 @@
-<StyleguideExample @title="invisible">
-  <TopicStatus @topic={{@dummy.invisibleTopic}} />
-</StyleguideExample>
+import TopicStatus from "discourse/components/topic-status";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
-<StyleguideExample @title="closed">
-  <TopicStatus @topic={{@dummy.closedTopic}} />
-</StyleguideExample>
+const TopicStatuses = <template>
+  <StyleguideExample @title="invisible">
+    <TopicStatus @topic={{@dummy.invisibleTopic}} />
+  </StyleguideExample>
 
-<StyleguideExample @title="pinned">
-  <TopicStatus @topic={{@dummy.pinnedTopic}} />
-</StyleguideExample>
+  <StyleguideExample @title="closed">
+    <TopicStatus @topic={{@dummy.closedTopic}} />
+  </StyleguideExample>
 
-<StyleguideExample @title="unpinned">
-  <TopicStatus @topic={{@dummy.unpinnedTopic}} />
-</StyleguideExample>
+  <StyleguideExample @title="pinned">
+    <TopicStatus @topic={{@dummy.pinnedTopic}} />
+  </StyleguideExample>
 
-<StyleguideExample @title="archived">
-  <TopicStatus @topic={{@dummy.archivedTopic}} />
-</StyleguideExample>
+  <StyleguideExample @title="unpinned">
+    <TopicStatus @topic={{@dummy.unpinnedTopic}} />
+  </StyleguideExample>
 
-<StyleguideExample @title="warning">
-  <TopicStatus @topic={{@dummy.warningTopic}} />
-</StyleguideExample>
+  <StyleguideExample @title="archived">
+    <TopicStatus @topic={{@dummy.archivedTopic}} />
+  </StyleguideExample>
 
-<StyleguideExample @title="no status">
-  <TopicStatus @topic={{@dummy.topic}} />
-</StyleguideExample>
\ No newline at end of file
+  <StyleguideExample @title="warning">
+    <TopicStatus @topic={{@dummy.warningTopic}} />
+  </StyleguideExample>
+
+  <StyleguideExample @title="no status">
+    <TopicStatus @topic={{@dummy.topic}} />
+  </StyleguideExample>
+</template>;
+export default TopicStatuses;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/bread-crumbs.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/bread-crumbs.gjs
index e6f09e495ce..4292e5bf918 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/bread-crumbs.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/bread-crumbs.gjs
@@ -1,9 +1,15 @@
-<StyleguideExample @title="category-breadcrumbs">
-  <BreadCrumbs @categories={{@dummy.categories}} @showTags={{false}} />
-</StyleguideExample>
+import BreadCrumbs from "discourse/components/bread-crumbs";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
-{{#if @siteSettings.tagging_enabled}}
-  <StyleguideExample @title="category-breadcrumbs - tags">
-    <BreadCrumbs @categories={{@dummy.categories}} @showTags={{true}} />
+const BreadCrumbs0 = <template>
+  <StyleguideExample @title="category-breadcrumbs">
+    <BreadCrumbs @categories={{@dummy.categories}} @showTags={{false}} />
   </StyleguideExample>
-{{/if}}
\ No newline at end of file
+
+  {{#if @siteSettings.tagging_enabled}}
+    <StyleguideExample @title="category-breadcrumbs - tags">
+      <BreadCrumbs @categories={{@dummy.categories}} @showTags={{true}} />
+    </StyleguideExample>
+  {{/if}}
+</template>;
+export default BreadCrumbs0;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/categories.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/categories.gjs
index 413af982b77..77d937f522d 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/categories.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/categories.gjs
@@ -1,23 +1,29 @@
-<StyleguideExample @title="category-badge - bullet">
-  {{#each @dummy.categories as |c|}}
-    {{category-badge c categoryStyle="bullet"}}
-  {{/each}}
-</StyleguideExample>
+import categoryBadge from "discourse/helpers/category-badge";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
-<StyleguideExample @title="category-badge - bar">
-  {{#each @dummy.categories as |c|}}
-    {{category-badge c categoryStyle="bar"}}
-  {{/each}}
-</StyleguideExample>
+const Categories = <template>
+  <StyleguideExample @title="category-badge - bullet">
+    {{#each @dummy.categories as |c|}}
+      {{categoryBadge c categoryStyle="bullet"}}
+    {{/each}}
+  </StyleguideExample>
 
-<StyleguideExample @title="category-badge - box">
-  {{#each @dummy.categories as |c|}}
-    {{category-badge c categoryStyle="box"}}
-  {{/each}}
-</StyleguideExample>
+  <StyleguideExample @title="category-badge - bar">
+    {{#each @dummy.categories as |c|}}
+      {{categoryBadge c categoryStyle="bar"}}
+    {{/each}}
+  </StyleguideExample>
 
-<StyleguideExample @title="category-badge - none">
-  {{#each @dummy.categories as |c|}}
-    {{category-badge c categoryStyle="none"}}
-  {{/each}}
-</StyleguideExample>
\ No newline at end of file
+  <StyleguideExample @title="category-badge - box">
+    {{#each @dummy.categories as |c|}}
+      {{categoryBadge c categoryStyle="box"}}
+    {{/each}}
+  </StyleguideExample>
+
+  <StyleguideExample @title="category-badge - none">
+    {{#each @dummy.categories as |c|}}
+      {{categoryBadge c categoryStyle="none"}}
+    {{/each}}
+  </StyleguideExample>
+</template>;
+export default Categories;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/char-counter.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/char-counter.gjs
index 693fb3805f1..16fa20ddea2 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/char-counter.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/char-counter.gjs
@@ -1,8 +1,17 @@
-<StyleguideExample @title="<CharCounter>">
-  <CharCounter @max="50" @value={{@dummy.charCounterContent}}>
-    <textarea
-      {{on "input" (with-event-value (fn (mut @dummy.charCounterContent)))}}
-      class="styleguide--char-counter"
-    ></textarea>
-  </CharCounter>
-</StyleguideExample>
\ No newline at end of file
+import { fn } from "@ember/helper";
+import { on } from "@ember/modifier";
+import CharCounter from "discourse/components/char-counter";
+import withEventValue from "discourse/helpers/with-event-value";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
+
+const CharCounter0 = <template>
+  <StyleguideExample @title="<CharCounter>">
+    <CharCounter @max="50" @value={{@dummy.charCounterContent}}>
+      <textarea
+        {{on "input" (withEventValue (fn (mut @dummy.charCounterContent)))}}
+        class="styleguide--char-counter"
+      ></textarea>
+    </CharCounter>
+  </StyleguideExample>
+</template>;
+export default CharCounter0;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/empty-state.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/empty-state.gjs
index 6f0cea6debc..0c05d7fd3ac 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/empty-state.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/empty-state.gjs
@@ -1,3 +1,9 @@
-<StyleguideExample @title="<EmptyState>">
-  <EmptyState @title={{@dummy.sentence}} @body={{@dummy.short_sentence}} />
-</StyleguideExample>
\ No newline at end of file
+import EmptyState from "discourse/components/empty-state";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
+
+const EmptyState0 = <template>
+  <StyleguideExample @title="<EmptyState>">
+    <EmptyState @title={{@dummy.sentence}} @body={{@dummy.short_sentence}} />
+  </StyleguideExample>
+</template>;
+export default EmptyState0;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/footer-message.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/footer-message.gjs
index 2fdb4fc2676..7ee02ccf61b 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/footer-message.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/footer-message.gjs
@@ -1,25 +1,31 @@
-<StyleguideExample @title="<FooterMessage> - default">
-  <FooterMessage
-    @education={{@dummy.sentence}}
-    @message={{@dummy.short_sentence}}
-  />
-</StyleguideExample>
+import FooterMessage from "discourse/components/footer-message";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
-<StyleguideExample @title="<FooterMessage> - latest">
-  <FooterMessage
-    @education={{@dummy.sentence}}
-    @message={{@dummy.short_sentence}}
-    @latest={{true}}
-    @canCreateTopicOnCategory={{true}}
-    @createTopic={{@dummyAction}}
-  />
-</StyleguideExample>
+const FooterMessage0 = <template>
+  <StyleguideExample @title="<FooterMessage> - default">
+    <FooterMessage
+      @education={{@dummy.sentence}}
+      @message={{@dummy.short_sentence}}
+    />
+  </StyleguideExample>
 
-<StyleguideExample @title="<FooterMessage> - top">
-  <FooterMessage
-    @education={{@dummy.sentence}}
-    @message={{@dummy.short_sentence}}
-    @top={{true}}
-    @changePeriod={{@dummyAction}}
-  />
-</StyleguideExample>
\ No newline at end of file
+  <StyleguideExample @title="<FooterMessage> - latest">
+    <FooterMessage
+      @education={{@dummy.sentence}}
+      @message={{@dummy.short_sentence}}
+      @latest={{true}}
+      @canCreateTopicOnCategory={{true}}
+      @createTopic={{@dummyAction}}
+    />
+  </StyleguideExample>
+
+  <StyleguideExample @title="<FooterMessage> - top">
+    <FooterMessage
+      @education={{@dummy.sentence}}
+      @message={{@dummy.short_sentence}}
+      @top={{true}}
+      @changePeriod={{@dummyAction}}
+    />
+  </StyleguideExample>
+</template>;
+export default FooterMessage0;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/menus.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/menus.gjs
index f63d9a920b4..5840332dd83 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/menus.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/menus.gjs
@@ -1,10 +1,19 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
+import { Input } from "@ember/component";
+import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
+import DButton from "discourse/components/d-button";
+import DToggleSwitch from "discourse/components/d-toggle-switch";
+import DMenu from "float-kit/components/d-menu";
 import { MENU } from "float-kit/lib/constants";
 import DummyComponent from "discourse/plugins/styleguide/discourse/components/dummy-component";
+import StyleguideComponent from "discourse/plugins/styleguide/discourse/components/styleguide/component";
+import Controls from "discourse/plugins/styleguide/discourse/components/styleguide/controls";
+import Row from "discourse/plugins/styleguide/discourse/components/styleguide/controls/row";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
 export default class Menus extends Component {
   @service menu;
@@ -109,108 +118,116 @@ export default class Menus extends Component {
       content: this.content,
     };
   }
+
+  <template>
+    <StyleguideExample @title="<Dmenu />">
+      <StyleguideComponent @tag="dmenu component">
+        <:sample>
+          <DMenu
+            @label={{this.label}}
+            @offset={{this.offset}}
+            @arrow={{this.arrow}}
+            @maxWidth={{this.maxWidth}}
+            @identifier={{this.identifier}}
+            @interactive={{this.interactive}}
+            @triggers={{this.triggers}}
+            @untriggers={{this.untriggers}}
+            @content={{this.content}}
+          >
+            {{this.content}}
+          </DMenu>
+        </:sample>
+      </StyleguideComponent>
+
+      <StyleguideComponent @tag="dmenu component">
+        <:sample>
+          <DMenu
+            @offset={{this.offset}}
+            @arrow={{this.arrow}}
+            @maxWidth={{this.maxWidth}}
+            @identifier={{this.identifier}}
+            @interactive={{this.interactive}}
+            @triggers={{this.triggers}}
+            @untriggers={{this.untriggers}}
+            @content={{this.content}}
+          >
+            <:trigger>
+              {{this.label}}
+            </:trigger>
+            <:content>
+              {{this.content}}
+            </:content>
+          </DMenu>
+        </:sample>
+      </StyleguideComponent>
+
+      <StyleguideComponent @tag="menu service">
+        <:sample>
+          <button
+            type="button"
+            class="btn btn-default"
+            id="menu-instance"
+          >{{this.label}}</button>
+        </:sample>
+        <:actions>
+          <DButton @action={{this.registerMenu}}>Register</DButton>
+        </:actions>
+      </StyleguideComponent>
+
+      <StyleguideComponent @tag="menu service">
+        <:sample>
+          <button
+            type="button"
+            class="btn btn-default"
+            id="menu-instance-with-component"
+          >{{this.label}}</button>
+        </:sample>
+        <:actions>
+          <DButton @action={{this.registerMenuWithComponent}}>Register</DButton>
+        </:actions>
+      </StyleguideComponent>
+
+      <Controls>
+        <Row @name="Example label">
+          <Input @value={{this.label}} />
+        </Row>
+        <Row @name="[@content]">
+          <Input @value={{this.content}} />
+        </Row>
+        <Row @name="[@identifier]">
+          <Input @value={{this.identifier}} />
+        </Row>
+        <Row @name="[@offset]">
+          <Input @value={{this.offset}} @type="number" />
+        </Row>
+        <Row @name="[@triggers]">
+          <Input @value={{this.triggers}} />
+        </Row>
+        <Row @name="[@untriggers]">
+          <Input @value={{this.untriggers}} />
+        </Row>
+        <Row @name="[@maxWidth]">
+          <Input @value={{this.maxWidth}} @type="number" />
+        </Row>
+        <Row @name="[@interactive]">
+          <DToggleSwitch
+            @state={{this.interactive}}
+            {{on "click" this.toggleInteractive}}
+          />
+        </Row>
+        <Row @name="[@arrow]">
+          <DToggleSwitch
+            @state={{this.arrow}}
+            {{on "click" this.toggleArrow}}
+          />
+        </Row>
+        <Row @name="[@inline]">
+          <DToggleSwitch
+            @state={{this.inline}}
+            {{on "click" this.toggleInline}}
+          />
+        </Row>
+      </Controls>
+    </StyleguideExample>
+  </template>
 }
-
-<StyleguideExample @title="<Dmenu />">
-  <Styleguide::Component @tag="dmenu component">
-    <:sample>
-      <DMenu
-        @label={{this.label}}
-        @offset={{this.offset}}
-        @arrow={{this.arrow}}
-        @maxWidth={{this.maxWidth}}
-        @identifier={{this.identifier}}
-        @interactive={{this.interactive}}
-        @triggers={{this.triggers}}
-        @untriggers={{this.untriggers}}
-        @content={{this.content}}
-      >
-        {{this.content}}
-      </DMenu>
-    </:sample>
-  </Styleguide::Component>
-
-  <Styleguide::Component @tag="dmenu component">
-    <:sample>
-      <DMenu
-        @offset={{this.offset}}
-        @arrow={{this.arrow}}
-        @maxWidth={{this.maxWidth}}
-        @identifier={{this.identifier}}
-        @interactive={{this.interactive}}
-        @triggers={{this.triggers}}
-        @untriggers={{this.untriggers}}
-        @content={{this.content}}
-      >
-        <:trigger>
-          {{this.label}}
-        </:trigger>
-        <:content>
-          {{this.content}}
-        </:content>
-      </DMenu>
-    </:sample>
-  </Styleguide::Component>
-
-  <Styleguide::Component @tag="menu service">
-    <:sample>
-      <button
-        type="button"
-        class="btn btn-default"
-        id="menu-instance"
-      >{{this.label}}</button>
-    </:sample>
-    <:actions>
-      <DButton @action={{this.registerMenu}}>Register</DButton>
-    </:actions>
-  </Styleguide::Component>
-
-  <Styleguide::Component @tag="menu service">
-    <:sample>
-      <button
-        type="button"
-        class="btn btn-default"
-        id="menu-instance-with-component"
-      >{{this.label}}</button>
-    </:sample>
-    <:actions>
-      <DButton @action={{this.registerMenuWithComponent}}>Register</DButton>
-    </:actions>
-  </Styleguide::Component>
-
-  <Styleguide::Controls>
-    <Styleguide::Controls::Row @name="Example label">
-      <Input @value={{this.label}} />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@content]">
-      <Input @value={{this.content}} />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@identifier]">
-      <Input @value={{this.identifier}} />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@offset]">
-      <Input @value={{this.offset}} @type="number" />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@triggers]">
-      <Input @value={{this.triggers}} />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@untriggers]">
-      <Input @value={{this.untriggers}} />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@maxWidth]">
-      <Input @value={{this.maxWidth}} @type="number" />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@interactive]">
-      <DToggleSwitch
-        @state={{this.interactive}}
-        {{on "click" this.toggleInteractive}}
-      />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@arrow]">
-      <DToggleSwitch @state={{this.arrow}} {{on "click" this.toggleArrow}} />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@inline]">
-      <DToggleSwitch @state={{this.inline}} {{on "click" this.toggleInline}} />
-    </Styleguide::Controls::Row>
-  </Styleguide::Controls>
-</StyleguideExample>
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/navigation-bar.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/navigation-bar.gjs
index a00d9730d23..7d00dea3356 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/navigation-bar.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/navigation-bar.gjs
@@ -1,31 +1,39 @@
-<StyleguideExample @title="<NavigationBar>">
-  <NavigationBar @navItems={{@dummy.navItems}} @filterMode="latest" />
-</StyleguideExample>
+import MobileNav from "discourse/components/mobile-nav";
+import NavigationBar from "discourse/components/navigation-bar";
+import GroupDropdown from "select-kit/components/group-dropdown";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
-<StyleguideExample @title=".user-main .nav-pills">
-  <MobileNav @desktopClass="nav nav-pills user-nav" class="main-nav">
-    {{#each @dummy.navItems as |ni|}}
-      <li>
-        <a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>
-          {{ni.displayName}}
-        </a>
+const NavigationBar0 = <template>
+  <StyleguideExample @title="<NavigationBar>">
+    <NavigationBar @navItems={{@dummy.navItems}} @filterMode="latest" />
+  </StyleguideExample>
+
+  <StyleguideExample @title=".user-main .nav-pills">
+    <MobileNav @desktopClass="nav nav-pills user-nav" class="main-nav">
+      {{#each @dummy.navItems as |ni|}}
+        <li>
+          <a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>
+            {{ni.displayName}}
+          </a>
+        </li>
+      {{/each}}
+    </MobileNav>
+  </StyleguideExample>
+
+  <StyleguideExample @title="group page <NavigationBar>">
+    <MobileNav @desktopClass="nav nav-pills" class="group-nav">
+      <li class="group-dropdown">
+        <GroupDropdown @groups={{@dummy.groupNames}} @value="staff" />
       </li>
-    {{/each}}
-  </MobileNav>
-</StyleguideExample>
 
-<StyleguideExample @title="group page <NavigationBar>">
-  <MobileNav @desktopClass="nav nav-pills" class="group-nav">
-    <li class="group-dropdown">
-      <GroupDropdown @groups={{@dummy.groupNames}} @value="staff" />
-    </li>
-
-    {{#each @dummy.navItems as |ni|}}
-      <li>
-        <a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>
-          {{ni.displayName}}
-        </a>
-      </li>
-    {{/each}}
-  </MobileNav>
-</StyleguideExample>
\ No newline at end of file
+      {{#each @dummy.navItems as |ni|}}
+        <li>
+          <a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>
+            {{ni.displayName}}
+          </a>
+        </li>
+      {{/each}}
+    </MobileNav>
+  </StyleguideExample>
+</template>;
+export default NavigationBar0;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/navigation-stacked.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/navigation-stacked.gjs
index e12d49d6def..ade95e08829 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/navigation-stacked.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/navigation-stacked.gjs
@@ -1,20 +1,8 @@
-<StyleguideExample @title=".nav-stacked" class="half-size">
-  <MobileNav
-    @desktopClass="preferences-list action-list nav-stacked"
-    class="preferences-nav"
-  >
-    {{#each @dummy.navItems as |ni|}}
-      <li>
-        <a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>
-          {{ni.displayName}}
-        </a>
-      </li>
-    {{/each}}
-  </MobileNav>
-</StyleguideExample>
+import MobileNav from "discourse/components/mobile-nav";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
-<StyleguideExample @title=".user-navigation .nav-stacked" class="half-size">
-  <section class="user-navigation">
+const NavigationStacked = <template>
+  <StyleguideExample @title=".nav-stacked" class="half-size">
     <MobileNav
       @desktopClass="preferences-list action-list nav-stacked"
       class="preferences-nav"
@@ -27,5 +15,23 @@
         </li>
       {{/each}}
     </MobileNav>
-  </section>
-</StyleguideExample>
\ No newline at end of file
+  </StyleguideExample>
+
+  <StyleguideExample @title=".user-navigation .nav-stacked" class="half-size">
+    <section class="user-navigation">
+      <MobileNav
+        @desktopClass="preferences-list action-list nav-stacked"
+        class="preferences-nav"
+      >
+        {{#each @dummy.navItems as |ni|}}
+          <li>
+            <a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>
+              {{ni.displayName}}
+            </a>
+          </li>
+        {{/each}}
+      </MobileNav>
+    </section>
+  </StyleguideExample>
+</template>;
+export default NavigationStacked;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/post-menu.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/post-menu.gjs
index 8f4acf2a76c..6076541ebee 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/post-menu.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/post-menu.gjs
@@ -1,7 +1,13 @@
-<StyleguideExample @title="post-menu">
-  <MountWidget
-    @widget="post-menu"
-    @args={{@dummy.transformedPost}}
-    @model={{@dummy.postModel}}
-  />
-</StyleguideExample>
\ No newline at end of file
+import MountWidget from "discourse/components/mount-widget";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
+
+const PostMenu = <template>
+  <StyleguideExample @title="post-menu">
+    <MountWidget
+      @widget="post-menu"
+      @args={{@dummy.transformedPost}}
+      @model={{@dummy.postModel}}
+    />
+  </StyleguideExample>
+</template>;
+export default PostMenu;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/signup-cta.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/signup-cta.gjs
index 9a6055492db..a08f1ba9ff1 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/signup-cta.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/signup-cta.gjs
@@ -1,3 +1,9 @@
-<StyleguideExample @title="<SignupCta>">
-  <SignupCta />
-</StyleguideExample>
\ No newline at end of file
+import SignupCta from "discourse/components/signup-cta";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
+
+const SignupCta0 = <template>
+  <StyleguideExample @title="<SignupCta>">
+    <SignupCta />
+  </StyleguideExample>
+</template>;
+export default SignupCta0;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.gjs
index a0b7e1ed6f0..d090ed7be94 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.gjs
@@ -1,9 +1,19 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
+import { Input } from "@ember/component";
+import { fn, hash } from "@ember/helper";
+import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import DToggleSwitch from "discourse/components/d-toggle-switch";
+import IconPicker from "select-kit/components/icon-picker";
 import { TOAST } from "float-kit/lib/constants";
 import DummyComponent from "discourse/plugins/styleguide/discourse/components/dummy-component";
+import StyleguideComponent from "discourse/plugins/styleguide/discourse/components/styleguide/component";
+import Controls from "discourse/plugins/styleguide/discourse/components/styleguide/controls";
+import Row from "discourse/plugins/styleguide/discourse/components/styleguide/controls/row";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
 export default class Toasts extends Component {
   @service toasts;
@@ -74,104 +84,109 @@ export default class Toasts extends Component {
   toggleShowProgressBar() {
     this.showProgressBar = !this.showProgressBar;
   }
+
+  <template>
+    {{! template-lint-disable no-potential-path-strings }}
+    <StyleguideExample @title="Toasts service">
+      <StyleguideComponent @tag="default">
+        <:actions>
+          <DButton
+            @translatedLabel="Show default toast"
+            @action={{fn this.showToast "default"}}
+          />
+        </:actions>
+      </StyleguideComponent>
+
+      <StyleguideComponent @tag="success">
+        <:actions>
+          <DButton
+            @translatedLabel="Show success toast"
+            @action={{fn this.showToast "success"}}
+          />
+        </:actions>
+      </StyleguideComponent>
+
+      <StyleguideComponent @tag="warning">
+        <:actions>
+          <DButton
+            @translatedLabel="Show warning toast"
+            @action={{fn this.showToast "warning"}}
+          />
+        </:actions>
+      </StyleguideComponent>
+
+      <StyleguideComponent @tag="info">
+        <:actions>
+          <DButton
+            @translatedLabel="Show info toast"
+            @action={{fn this.showToast "info"}}
+          />
+        </:actions>
+      </StyleguideComponent>
+
+      <StyleguideComponent @tag="error">
+        <:actions>
+          <DButton
+            @translatedLabel="Show error toast"
+            @action={{fn this.showToast "error"}}
+          />
+        </:actions>
+      </StyleguideComponent>
+
+      <StyleguideComponent @tag="custom component">
+        <:actions>
+          <DButton
+            @translatedLabel="Show toast"
+            @action={{this.showCustomComponentToast}}
+          />
+        </:actions>
+      </StyleguideComponent>
+
+      <Controls>
+        <Row @name="[@options.autoClose]">
+          <DToggleSwitch
+            @state={{this.autoClose}}
+            {{on "click" this.toggleAutoClose}}
+          />
+        </Row>
+        <Row @name="[@options.showProgressBar]">
+          <DToggleSwitch
+            @state={{this.showProgressBar}}
+            {{on "click" this.toggleShowProgressBar}}
+          />
+        </Row>
+        {{#if this.autoClose}}
+          <Row @name="[@options.duration] ms">
+            <Input @value={{this.duration}} @type="number" />
+          </Row>
+        {{/if}}
+        <Row @name="[@options.class]">
+          <Input @value={{this.class}} />
+        </Row>
+        <Row>
+          <b>Model props for default:</b>
+        </Row>
+        <Row @name="[@options.data.title]">
+          <Input @value={{this.title}} />
+        </Row>
+        <Row @name="[@options.data.message]">
+          <Input @value={{this.message}} />
+        </Row>
+        <Row @name="[@options.data.icon]">
+          <IconPicker
+            @name="icon"
+            @value={{this.icon}}
+            @options={{hash maximum=1}}
+            @onChange={{fn (mut this.icon)}}
+          />
+        </Row>
+        <Row @name="With an action">
+          <DToggleSwitch
+            @state={{this.action}}
+            {{on "click" this.toggleAction}}
+          />
+        </Row>
+      </Controls>
+    </StyleguideExample>
+  </template>
 }
-
-{{! template-lint-disable no-potential-path-strings }}
-<StyleguideExample @title="Toasts service">
-  <Styleguide::Component @tag="default">
-    <:actions>
-      <DButton
-        @translatedLabel="Show default toast"
-        @action={{fn this.showToast "default"}}
-      />
-    </:actions>
-  </Styleguide::Component>
-
-  <Styleguide::Component @tag="success">
-    <:actions>
-      <DButton
-        @translatedLabel="Show success toast"
-        @action={{fn this.showToast "success"}}
-      />
-    </:actions>
-  </Styleguide::Component>
-
-  <Styleguide::Component @tag="warning">
-    <:actions>
-      <DButton
-        @translatedLabel="Show warning toast"
-        @action={{fn this.showToast "warning"}}
-      />
-    </:actions>
-  </Styleguide::Component>
-
-  <Styleguide::Component @tag="info">
-    <:actions>
-      <DButton
-        @translatedLabel="Show info toast"
-        @action={{fn this.showToast "info"}}
-      />
-    </:actions>
-  </Styleguide::Component>
-
-  <Styleguide::Component @tag="error">
-    <:actions>
-      <DButton
-        @translatedLabel="Show error toast"
-        @action={{fn this.showToast "error"}}
-      />
-    </:actions>
-  </Styleguide::Component>
-
-  <Styleguide::Component @tag="custom component">
-    <:actions>
-      <DButton
-        @translatedLabel="Show toast"
-        @action={{this.showCustomComponentToast}}
-      />
-    </:actions>
-  </Styleguide::Component>
-
-  <Styleguide::Controls>
-    <Styleguide::Controls::Row @name="[@options.autoClose]">
-      <DToggleSwitch
-        @state={{this.autoClose}}
-        {{on "click" this.toggleAutoClose}}
-      />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@options.showProgressBar]">
-      <DToggleSwitch
-        @state={{this.showProgressBar}}
-        {{on "click" this.toggleShowProgressBar}}
-      />
-    </Styleguide::Controls::Row>
-    {{#if this.autoClose}}
-      <Styleguide::Controls::Row @name="[@options.duration] ms">
-        <Input @value={{this.duration}} @type="number" />
-      </Styleguide::Controls::Row>
-    {{/if}}
-    <Styleguide::Controls::Row @name="[@options.class]">
-      <Input @value={{this.class}} />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row>
-      <b>Model props for default:</b>
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@options.data.title]">
-      <Input @value={{this.title}} />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@options.data.message]">
-      <Input @value={{this.message}} />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@options.data.icon]">
-      <IconPicker
-        @name="icon"
-        @value={{this.icon}}
-        @options={{hash maximum=1}}
-        @onChange={{fn (mut this.icon)}}
-      />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="With an action">
-      <DToggleSwitch @state={{this.action}} {{on "click" this.toggleAction}} />
-    </Styleguide::Controls::Row>
-  </Styleguide::Controls>
-</StyleguideExample>
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/tooltips.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/tooltips.gjs
index 30ae670cfc0..b8315183b02 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/tooltips.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/tooltips.gjs
@@ -1,10 +1,19 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
+import { Input } from "@ember/component";
+import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
+import DButton from "discourse/components/d-button";
+import DToggleSwitch from "discourse/components/d-toggle-switch";
+import DTooltip from "float-kit/components/d-tooltip";
 import { TOOLTIP } from "float-kit/lib/constants";
 import DummyComponent from "discourse/plugins/styleguide/discourse/components/dummy-component";
+import StyleguideComponent from "discourse/plugins/styleguide/discourse/components/styleguide/component";
+import Controls from "discourse/plugins/styleguide/discourse/components/styleguide/controls";
+import Row from "discourse/plugins/styleguide/discourse/components/styleguide/controls/row";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
 export default class Tooltips extends Component {
   @service tooltip;
@@ -114,100 +123,110 @@ export default class Tooltips extends Component {
       content: this.content,
     };
   }
+
+  <template>
+    <StyleguideExample @title="<DTooltip />">
+      <StyleguideComponent @tag="tooltip component">
+        <:sample>
+          <DTooltip
+            @label={{this.label}}
+            @offset={{this.offset}}
+            @arrow={{this.arrow}}
+            @maxWidth={{this.maxWidth}}
+            @identifier={{this.identifier}}
+            @interactive={{this.interactive}}
+            @triggers={{this.triggers}}
+            @untriggers={{this.untriggers}}
+            @content={{this.content}}
+            @inline={{this.inline}}
+          />
+        </:sample>
+      </StyleguideComponent>
+
+      <StyleguideComponent @tag="tooltip component">
+        <:sample>
+          <DTooltip
+            @offset={{this.offset}}
+            @arrow={{this.arrow}}
+            @maxWidth={{this.maxWidth}}
+            @identifier={{this.identifier}}
+            @interactive={{this.interactive}}
+            @triggers={{this.triggers}}
+            @untriggers={{this.untriggers}}
+            @content={{this.content}}
+            @inline={{this.inline}}
+          >
+            <:trigger>
+              {{this.label}}
+            </:trigger>
+            <:content>
+              {{this.content}}
+            </:content>
+          </DTooltip>
+        </:sample>
+      </StyleguideComponent>
+
+      <StyleguideComponent @tag="tooltip service">
+        <:sample>
+          <span id="tooltip-instance">{{this.label}}</span>
+        </:sample>
+        <:actions>
+          <DButton @action={{this.registerTooltip}}>Register</DButton>
+        </:actions>
+      </StyleguideComponent>
+
+      <StyleguideComponent @tag="tooltip service">
+        <:sample>
+          <span id="tooltip-instance-with-component">{{this.label}}</span>
+        </:sample>
+        <:actions>
+          <DButton
+            @action={{this.registerTooltipWithComponent}}
+          >Register</DButton>
+        </:actions>
+      </StyleguideComponent>
+
+      <Controls>
+        <Row @name="Example label">
+          <Input @value={{this.label}} />
+        </Row>
+        <Row @name="[@content]">
+          <Input @value={{this.content}} />
+        </Row>
+        <Row @name="[@identifier]">
+          <Input @value={{this.identifier}} />
+        </Row>
+        <Row @name="[@offset]">
+          <Input @value={{this.offset}} @type="number" />
+        </Row>
+        <Row @name="[@triggers]">
+          <Input @value={{this.triggers}} />
+        </Row>
+        <Row @name="[@untriggers]">
+          <Input @value={{this.untriggers}} />
+        </Row>
+        <Row @name="[@maxWidth]">
+          <Input @value={{this.maxWidth}} @type="number" />
+        </Row>
+        <Row @name="[@interactive]">
+          <DToggleSwitch
+            @state={{this.interactive}}
+            {{on "click" this.toggleInteractive}}
+          />
+        </Row>
+        <Row @name="[@arrow]">
+          <DToggleSwitch
+            @state={{this.arrow}}
+            {{on "click" this.toggleArrow}}
+          />
+        </Row>
+        <Row @name="[@inline]">
+          <DToggleSwitch
+            @state={{this.inline}}
+            {{on "click" this.toggleInline}}
+          />
+        </Row>
+      </Controls>
+    </StyleguideExample>
+  </template>
 }
-
-<StyleguideExample @title="<DTooltip />">
-  <Styleguide::Component @tag="tooltip component">
-    <:sample>
-      <DTooltip
-        @label={{this.label}}
-        @offset={{this.offset}}
-        @arrow={{this.arrow}}
-        @maxWidth={{this.maxWidth}}
-        @identifier={{this.identifier}}
-        @interactive={{this.interactive}}
-        @triggers={{this.triggers}}
-        @untriggers={{this.untriggers}}
-        @content={{this.content}}
-        @inline={{this.inline}}
-      />
-    </:sample>
-  </Styleguide::Component>
-
-  <Styleguide::Component @tag="tooltip component">
-    <:sample>
-      <DTooltip
-        @offset={{this.offset}}
-        @arrow={{this.arrow}}
-        @maxWidth={{this.maxWidth}}
-        @identifier={{this.identifier}}
-        @interactive={{this.interactive}}
-        @triggers={{this.triggers}}
-        @untriggers={{this.untriggers}}
-        @content={{this.content}}
-        @inline={{this.inline}}
-      >
-        <:trigger>
-          {{this.label}}
-        </:trigger>
-        <:content>
-          {{this.content}}
-        </:content>
-      </DTooltip>
-    </:sample>
-  </Styleguide::Component>
-
-  <Styleguide::Component @tag="tooltip service">
-    <:sample>
-      <span id="tooltip-instance">{{this.label}}</span>
-    </:sample>
-    <:actions>
-      <DButton @action={{this.registerTooltip}}>Register</DButton>
-    </:actions>
-  </Styleguide::Component>
-
-  <Styleguide::Component @tag="tooltip service">
-    <:sample>
-      <span id="tooltip-instance-with-component">{{this.label}}</span>
-    </:sample>
-    <:actions>
-      <DButton @action={{this.registerTooltipWithComponent}}>Register</DButton>
-    </:actions>
-  </Styleguide::Component>
-
-  <Styleguide::Controls>
-    <Styleguide::Controls::Row @name="Example label">
-      <Input @value={{this.label}} />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@content]">
-      <Input @value={{this.content}} />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@identifier]">
-      <Input @value={{this.identifier}} />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@offset]">
-      <Input @value={{this.offset}} @type="number" />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@triggers]">
-      <Input @value={{this.triggers}} />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@untriggers]">
-      <Input @value={{this.untriggers}} />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@maxWidth]">
-      <Input @value={{this.maxWidth}} @type="number" />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@interactive]">
-      <DToggleSwitch
-        @state={{this.interactive}}
-        {{on "click" this.toggleInteractive}}
-      />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@arrow]">
-      <DToggleSwitch @state={{this.arrow}} {{on "click" this.toggleArrow}} />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="[@inline]">
-      <DToggleSwitch @state={{this.inline}} {{on "click" this.toggleInline}} />
-    </Styleguide::Controls::Row>
-  </Styleguide::Controls>
-</StyleguideExample>
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/topic-list-item.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/topic-list-item.gjs
index 6e53d76ca4f..b7214710653 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/topic-list-item.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/topic-list-item.gjs
@@ -1,35 +1,41 @@
-<StyleguideExample @title="<TopicListItem>">
-  <table class="topic-list">
-    <tbody>
-      <TopicListItem @topic={{@dummy.topic}} @showPosters={{true}} />
-    </tbody>
-  </table>
-</StyleguideExample>
+import LatestTopicListItem from "discourse/components/topic-list/latest-topic-list-item";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
-<StyleguideExample @title="<TopicListItem> - hide category">
-  <table class="topic-list">
-    <tbody>
-      <TopicListItem
-        @topic={{@dummy.topic}}
-        @hideCategory={{true}}
-        @showPosters={{true}}
-      />
-    </tbody>
-  </table>
-</StyleguideExample>
+const TopicListItem0 = <template>
+  <StyleguideExample @title="<TopicListItem>">
+    <table class="topic-list">
+      <tbody>
+        <LatestTopicListItem @topic={{@dummy.topic}} @showPosters={{true}} />
+      </tbody>
+    </table>
+  </StyleguideExample>
 
-<StyleguideExample @title="<TopicListItem> - show likes">
-  <table class="topic-list">
-    <tbody>
-      <TopicListItem
-        @topic={{@dummy.topic}}
-        @showLikes={{true}}
-        @showPosters={{true}}
-      />
-    </tbody>
-  </table>
-</StyleguideExample>
+  <StyleguideExample @title="<TopicListItem> - hide category">
+    <table class="topic-list">
+      <tbody>
+        <LatestTopicListItem
+          @topic={{@dummy.topic}}
+          @hideCategory={{true}}
+          @showPosters={{true}}
+        />
+      </tbody>
+    </table>
+  </StyleguideExample>
 
-<StyleguideExample @title="<TopicListItem> - latest" class="half-size">
-  <TopicList::LatestTopicListItem @topic={{@dummy.topic}} />
-</StyleguideExample>
\ No newline at end of file
+  <StyleguideExample @title="<TopicListItem> - show likes">
+    <table class="topic-list">
+      <tbody>
+        <LatestTopicListItem
+          @topic={{@dummy.topic}}
+          @showLikes={{true}}
+          @showPosters={{true}}
+        />
+      </tbody>
+    </table>
+  </StyleguideExample>
+
+  <StyleguideExample @title="<TopicListItem> - latest" class="half-size">
+    <LatestTopicListItem @topic={{@dummy.topic}} />
+  </StyleguideExample>
+</template>;
+export default TopicListItem0;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/topic-notifications.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/topic-notifications.gjs
index 78327167263..3e5add99873 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/topic-notifications.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/topic-notifications.gjs
@@ -1,7 +1,13 @@
-<StyleguideExample @title="<TopicNotificationsButton> expanded">
-  <TopicNotificationsButton @topic={{@dummy.topic}} @expanded={{true}} />
-</StyleguideExample>
+import TopicNotificationsButton from "select-kit/components/topic-notifications-button";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
-<StyleguideExample @title="<TopicNotificationsButton>">
-  <TopicNotificationsButton @topic={{@dummy.topic}} @expanded={{false}} />
-</StyleguideExample>
\ No newline at end of file
+const TopicNotifications = <template>
+  <StyleguideExample @title="<TopicNotificationsButton> expanded">
+    <TopicNotificationsButton @topic={{@dummy.topic}} @expanded={{true}} />
+  </StyleguideExample>
+
+  <StyleguideExample @title="<TopicNotificationsButton>">
+    <TopicNotificationsButton @topic={{@dummy.topic}} @expanded={{false}} />
+  </StyleguideExample>
+</template>;
+export default TopicNotifications;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/topic-timer-info.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/topic-timer-info.gjs
index 580d47a4356..998702b3442 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/topic-timer-info.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/topic-timer-info.gjs
@@ -1,3 +1,9 @@
-<StyleguideExample @title="<TopicTimerInfo>">
-  <TopicTimerInfo @statusType="reminder" @executeAt={{@dummy.soon}} />
-</StyleguideExample>
\ No newline at end of file
+import TopicTimerInfo from "discourse/components/topic-timer-info";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
+
+const TopicTimerInfo0 = <template>
+  <StyleguideExample @title="<TopicTimerInfo>">
+    <TopicTimerInfo @statusType="reminder" @executeAt={{@dummy.soon}} />
+  </StyleguideExample>
+</template>;
+export default TopicTimerInfo0;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/00-post.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/00-post.gjs
index cf0dcc9f1f0..bc1e9d31118 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/00-post.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/00-post.gjs
@@ -1,7 +1,13 @@
-<StyleguideExample @title="post">
-  <MountWidget
-    @widget="post"
-    @model={{@dummy.postModel}}
-    @args={{@dummy.transformedPost}}
-  />
-</StyleguideExample>
\ No newline at end of file
+import MountWidget from "discourse/components/mount-widget";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
+
+const Post = <template>
+  <StyleguideExample @title="post">
+    <MountWidget
+      @widget="post"
+      @model={{@dummy.postModel}}
+      @args={{@dummy.transformedPost}}
+    />
+  </StyleguideExample>
+</template>;
+export default Post;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/02-topic-map.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/02-topic-map.gjs
index 1f95f8f39d9..a92773be0bc 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/02-topic-map.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/02-topic-map.gjs
@@ -1,6 +1,12 @@
-<StyleguideExample @title="topic-map">
-  <TopicMap
-    @model={{@dummy.postModel}}
-    @topicDetails={{@dummy.postModel.topic.details}}
-  />
-</StyleguideExample>
\ No newline at end of file
+import TopicMap from "discourse/components/topic-map";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
+
+const TopicMapOrganism = <template>
+  <StyleguideExample @title="topic-map">
+    <TopicMap
+      @model={{@dummy.postModel}}
+      @topicDetails={{@dummy.postModel.topic.details}}
+    />
+  </StyleguideExample>
+</template>;
+export default TopicMapOrganism;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/03-topic-footer-buttons.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/03-topic-footer-buttons.gjs
index 4b575f0e1ab..9526efdc6fc 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/03-topic-footer-buttons.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/03-topic-footer-buttons.gjs
@@ -1,13 +1,20 @@
-<StyleguideExample @title="<TopicFooterButtons> - logged in">
-  <TopicFooterButtons @topic={{@dummy.topic}} />
-</StyleguideExample>
+import DButton from "discourse/components/d-button";
+import TopicFooterButtons from "discourse/components/topic-footer-buttons";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
-<StyleguideExample @title="<TopicFooterButtons> - anonymous">
-  <div id="topic-footer-buttons">
-    <DButton
-      @icon="reply"
-      @label="topic.reply.title"
-      class="btn-primary pull-right"
-    />
-  </div>
-</StyleguideExample>
\ No newline at end of file
+const TopicFooterButtonsOrganism = <template>
+  <StyleguideExample @title="<TopicFooterButtons> - logged in">
+    <TopicFooterButtons @topic={{@dummy.topic}} />
+  </StyleguideExample>
+
+  <StyleguideExample @title="<TopicFooterButtons> - anonymous">
+    <div id="topic-footer-buttons">
+      <DButton
+        @icon="reply"
+        @label="topic.reply.title"
+        class="btn-primary pull-right"
+      />
+    </div>
+  </StyleguideExample>
+</template>;
+export default TopicFooterButtonsOrganism;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/04-topic-list.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/04-topic-list.gjs
index d95a8c0dc9e..59bdb047167 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/04-topic-list.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/04-topic-list.gjs
@@ -1,7 +1,13 @@
-<StyleguideExample @title="<TopicList>">
-  <TopicList @topics={{@dummy.topics}} @showPosters={{true}} />
-</StyleguideExample>
+import TopicList from "discourse/components/topic-list";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
-<StyleguideExample @title="<TopicList> - hide posters>">
-  <TopicList @topics={{@dummy.topics}} @showPosters={{false}} />
-</StyleguideExample>
\ No newline at end of file
+const TopicListOrganism = <template>
+  <StyleguideExample @title="<TopicList>">
+    <TopicList @topics={{@dummy.topics}} @showPosters={{true}} />
+  </StyleguideExample>
+
+  <StyleguideExample @title="<TopicList> - hide posters>">
+    <TopicList @topics={{@dummy.topics}} @showPosters={{false}} />
+  </StyleguideExample>
+</template>;
+export default TopicListOrganism;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/basic-topic-list.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/basic-topic-list.gjs
index 71fe056ac6c..04b96e9112f 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/basic-topic-list.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/basic-topic-list.gjs
@@ -1,3 +1,9 @@
-<StyleguideExample @title="<BasicTopicList>" class="half-size">
-  <BasicTopicList @topics={{@dummy.topics}} />
-</StyleguideExample>
\ No newline at end of file
+import BasicTopicList from "discourse/components/basic-topic-list";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
+
+const BasicTopicList0 = <template>
+  <StyleguideExample @title="<BasicTopicList>" class="half-size">
+    <BasicTopicList @topics={{@dummy.topics}} />
+  </StyleguideExample>
+</template>;
+export default BasicTopicList0;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/categories-list.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/categories-list.gjs
index 281aa4e30e2..cd5c34285cd 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/categories-list.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/categories-list.gjs
@@ -1,3 +1,9 @@
-<StyleguideExample @title="<CategoriesOnly>">
-  <CategoriesOnly @categories={{@dummy.categories}} />
-</StyleguideExample>
\ No newline at end of file
+import CategoriesOnly from "discourse/components/categories-only";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
+
+const CategoriesList = <template>
+  <StyleguideExample @title="<CategoriesOnly>">
+    <CategoriesOnly @categories={{@dummy.categories}} />
+  </StyleguideExample>
+</template>;
+export default CategoriesList;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.gjs
index 6682ca3dbf0..ed6392d416a 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.gjs
@@ -1,8 +1,18 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
+import { Input, Textarea } from "@ember/component";
+import { fn } from "@ember/helper";
+import { on } from "@ember/modifier";
 import { action } from "@ember/object";
+import DModal from "discourse/components/d-modal";
+import DToggleSwitch from "discourse/components/d-toggle-switch";
 import { getLoadedFaker } from "discourse/lib/load-faker";
 import { i18n } from "discourse-i18n";
+import ComboBox from "select-kit/components/combo-box";
+import StyleguideComponent from "discourse/plugins/styleguide/discourse/components/styleguide/component";
+import Controls from "discourse/plugins/styleguide/discourse/components/styleguide/controls";
+import Row from "discourse/plugins/styleguide/discourse/components/styleguide/controls/row";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
 export default class extends Component {
   @tracked inline = true;
@@ -45,78 +55,83 @@ export default class extends Component {
   toggleShowFooter() {
     this.showFooter = !this.showFooter;
   }
+
+  <template>
+    {{! template-lint-disable no-potential-path-strings}}
+
+    <StyleguideExample @title="<DModal>">
+      <StyleguideComponent>
+        <DModal
+          @closeModal={{fn (mut this.inline) true}}
+          @hideHeader={{this.hideHeader}}
+          @inline={{this.inline}}
+          @title={{this.title}}
+          @subtitle={{this.subtitle}}
+          @flash={{this.flash}}
+          @flashType={{this.flashType}}
+          @errors={{this.errors}}
+          @dismissable={{this.dismissable}}
+        >
+          <:body>
+            {{this.body}}
+          </:body>
+
+          <:footer>
+            {{i18n "styleguide.sections.modal.footer"}}
+          </:footer>
+        </DModal>
+      </StyleguideComponent>
+
+      <Controls>
+        <Row @name="@hideHeader">
+          <DToggleSwitch
+            @state={{this.hideHeader}}
+            {{on "click" this.toggleHeader}}
+          />
+        </Row>
+        <Row @name="@inline">
+          <DToggleSwitch
+            @state={{this.inline}}
+            {{on "click" this.toggleInline}}
+          />
+        </Row>
+        <Row @name="@dismissable">
+          <DToggleSwitch
+            @state={{this.dismissable}}
+            {{on "click" this.toggleDismissable}}
+          />
+        </Row>
+        <Row @name="@tagName">
+          <ComboBox
+            @value={{this.modalTagName}}
+            @content={{this.modalTagNames}}
+            @onChange={{fn (mut this.modalTagName)}}
+            @valueProperty={{null}}
+            @nameProperty={{null}}
+          />
+        </Row>
+        <Row @name="@title">
+          <Input @value={{this.title}} />
+        </Row>
+        <Row @name="@subtitle">
+          <Input @value={{this.subtitle}} />
+        </Row>
+        <Row @name="<:body>">
+          <Textarea @value={{this.body}} />
+        </Row>
+        <Row @name="@flash">
+          <Input @value={{this.flash}} />
+        </Row>
+        <Row @name="@flashType">
+          <ComboBox
+            @value={{this.flashType}}
+            @content={{this.flashTypes}}
+            @onChange={{fn (mut this.flashType)}}
+            @valueProperty={{null}}
+            @nameProperty={{null}}
+          />
+        </Row>
+      </Controls>
+    </StyleguideExample>
+  </template>
 }
-
-{{! template-lint-disable no-potential-path-strings}}
-
-<StyleguideExample @title="<DModal>">
-  <Styleguide::Component>
-    <DModal
-      @closeModal={{fn (mut this.inline) true}}
-      @hideHeader={{this.hideHeader}}
-      @inline={{this.inline}}
-      @title={{this.title}}
-      @subtitle={{this.subtitle}}
-      @flash={{this.flash}}
-      @flashType={{this.flashType}}
-      @errors={{this.errors}}
-      @dismissable={{this.dismissable}}
-    >
-      <:body>
-        {{this.body}}
-      </:body>
-
-      <:footer>
-        {{i18n "styleguide.sections.modal.footer"}}
-      </:footer>
-    </DModal>
-  </Styleguide::Component>
-
-  <Styleguide::Controls>
-    <Styleguide::Controls::Row @name="@hideHeader">
-      <DToggleSwitch
-        @state={{this.hideHeader}}
-        {{on "click" this.toggleHeader}}
-      />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="@inline">
-      <DToggleSwitch @state={{this.inline}} {{on "click" this.toggleInline}} />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="@dismissable">
-      <DToggleSwitch
-        @state={{this.dismissable}}
-        {{on "click" this.toggleDismissable}}
-      />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="@tagName">
-      <ComboBox
-        @value={{this.modalTagName}}
-        @content={{this.modalTagNames}}
-        @onChange={{fn (mut this.modalTagName)}}
-        @valueProperty={{null}}
-        @nameProperty={{null}}
-      />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="@title">
-      <Input @value={{this.title}} />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="@subtitle">
-      <Input @value={{this.subtitle}} />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="<:body>">
-      <Textarea @value={{this.body}} />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="@flash">
-      <Input @value={{this.flash}} />
-    </Styleguide::Controls::Row>
-    <Styleguide::Controls::Row @name="@flashType">
-      <ComboBox
-        @value={{this.flashType}}
-        @content={{this.flashTypes}}
-        @onChange={{fn (mut this.flashType)}}
-        @valueProperty={{null}}
-        @nameProperty={{null}}
-      />
-    </Styleguide::Controls::Row>
-  </Styleguide::Controls>
-</StyleguideExample>
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/navigation.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/navigation.gjs
index 66c9fa16fdb..c0e6b5179f0 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/navigation.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/navigation.gjs
@@ -1,15 +1,24 @@
-<StyleguideExample @title="navigation">
-  <div class="list-controls">
-    <div class="container">
-      <section class="navigation-container">
-        <BreadCrumbs @categories={{@dummy.categories}} />
-        <NavigationBar @navItems={{@dummy.navItems}} @filterMode="latest" />
+import BreadCrumbs from "discourse/components/bread-crumbs";
+import CreateTopicButton from "discourse/components/create-topic-button";
+import NavigationBar from "discourse/components/navigation-bar";
+import CategoriesAdminDropdown from "select-kit/components/categories-admin-dropdown";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
-        <div class="navigation-controls">
-          <CategoriesAdminDropdown />
-          <CreateTopicButton @canCreateTopic={{true}} />
-        </div>
-      </section>
+const Navigation = <template>
+  <StyleguideExample @title="navigation">
+    <div class="list-controls">
+      <div class="container">
+        <section class="navigation-container">
+          <BreadCrumbs @categories={{@dummy.categories}} />
+          <NavigationBar @navItems={{@dummy.navItems}} @filterMode="latest" />
+
+          <div class="navigation-controls">
+            <CategoriesAdminDropdown />
+            <CreateTopicButton @canCreateTopic={{true}} />
+          </div>
+        </section>
+      </div>
     </div>
-  </div>
-</StyleguideExample>
\ No newline at end of file
+  </StyleguideExample>
+</template>;
+export default Navigation;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/suggested-topics.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/suggested-topics.gjs
index 7ed102ae577..fde059d2d84 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/suggested-topics.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/suggested-topics.gjs
@@ -1,3 +1,9 @@
-<StyleguideExample @title="<SuggestedTopics>">
-  <SuggestedTopics @topic={{@dummy.topic}} />
-</StyleguideExample>
\ No newline at end of file
+import SuggestedTopics from "discourse/components/suggested-topics";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
+
+const SuggestedTopics0 = <template>
+  <StyleguideExample @title="<SuggestedTopics>">
+    <SuggestedTopics @topic={{@dummy.topic}} />
+  </StyleguideExample>
+</template>;
+export default SuggestedTopics0;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/user-about.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/user-about.gjs
index 571e5a33b80..f96fc77887b 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/user-about.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/user-about.gjs
@@ -1,403 +1,414 @@
-<StyleguideExample @title=".user-main .about.collapsed-info.no-background">
-  <section class="user-main">
-    <section class="collapsed-info about no-background">
-      <div class="profile-image"></div>
+import DButton from "discourse/components/d-button";
+import boundAvatar from "discourse/helpers/bound-avatar";
+import boundDate from "discourse/helpers/bound-date";
+import icon from "discourse/helpers/d-icon";
+import htmlSafe from "discourse/helpers/html-safe";
+import { i18n } from "discourse-i18n";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
-      <div class="details">
-        <div class="primary">
-          {{bound-avatar @dummy.user "huge"}}
-          <section class="controls">
-            <ul>
-              <li>
-                <a class="btn btn-primary">
-                  {{d-icon "envelope"}}
-                  {{i18n "user.private_message"}}
-                </a>
-              </li>
-              <li>
-                <a href={{@dummy.user.adminPath}} class="btn">
-                  {{d-icon "wrench"}}
-                  {{i18n "admin.user.show_admin_profile"}}
-                </a>
-              </li>
-              <li>
-                <a href="#" class="btn">
-                  {{d-icon "angles-down"}}
-                  {{i18n "user.expand_profile"}}
-                </a>
-              </li>
-            </ul>
-          </section>
+const UserAbout = <template>
+  <StyleguideExample @title=".user-main .about.collapsed-info.no-background">
+    <section class="user-main">
+      <section class="collapsed-info about no-background">
+        <div class="profile-image"></div>
 
-          <div class="primary-textual">
-            <h1 class="username">
-              {{@dummy.user.username}}
-              {{d-icon "shield-halved"}}
-            </h1>
-            <h2 class="full-name">{{@dummy.user.name}}</h2>
-            <h3>{{@dummy.user.title}}</h3>
+        <div class="details">
+          <div class="primary">
+            {{boundAvatar @dummy.user "huge"}}
+            <section class="controls">
+              <ul>
+                <li>
+                  <a class="btn btn-primary">
+                    {{icon "envelope"}}
+                    {{i18n "user.private_message"}}
+                  </a>
+                </li>
+                <li>
+                  <a href={{@dummy.user.adminPath}} class="btn">
+                    {{icon "wrench"}}
+                    {{i18n "admin.user.show_admin_profile"}}
+                  </a>
+                </li>
+                <li>
+                  <a href="#" class="btn">
+                    {{icon "angles-down"}}
+                    {{i18n "user.expand_profile"}}
+                  </a>
+                </li>
+              </ul>
+            </section>
+
+            <div class="primary-textual">
+              <h1 class="username">
+                {{@dummy.user.username}}
+                {{icon "shield-halved"}}
+              </h1>
+              <h2 class="full-name">{{@dummy.user.name}}</h2>
+              <h3>{{@dummy.user.title}}</h3>
+            </div>
+          </div>
+          <div style="clear: both"></div>
+        </div>
+      </section>
+    </section>
+  </StyleguideExample>
+
+  <StyleguideExample @title=".user-main .about.collapsed-info.has-background">
+    <section class="user-main">
+      <section
+        class="collapsed-info about has-background"
+        style={{@dummy.user.profileBackground}}
+      >
+        <div class="profile-image"></div>
+        <div class="details">
+          <div class="primary">
+            {{boundAvatar @dummy.user "huge"}}
+            <section class="controls">
+              <ul>
+                <li>
+                  <a class="btn btn-primary">
+                    {{icon "envelope"}}
+                    {{i18n "user.private_message"}}
+                  </a>
+                </li>
+                <li>
+                  <a href={{@dummy.user.adminPath}} class="btn">
+                    {{icon "wrench"}}
+                    {{i18n "admin.user.show_admin_profile"}}
+                  </a>
+                </li>
+                <li>
+                  <a href="#" class="btn">
+                    {{icon "angles-down"}}
+                    {{i18n "user.expand_profile"}}
+                  </a>
+                </li>
+              </ul>
+            </section>
+
+            <div class="primary-textual">
+              <h1 class="username">
+                {{@dummy.user.username}}
+                {{icon "shield-halved"}}
+              </h1>
+              <h2 class="full-name">{{@dummy.user.name}}</h2>
+              <h3>{{@dummy.user.title}}</h3>
+            </div>
+          </div>
+          <div style="clear: both"></div>
+        </div>
+      </section>
+    </section>
+  </StyleguideExample>
+
+  <StyleguideExample @title=".user-main .about.no-background">
+    <section class="user-main">
+      <section class="about no-background">
+
+        <div class="staff-counters">
+          <div>
+            <span class="helpful-flags">
+              {{@dummy.user.number_of_flags_given}}
+            </span>&nbsp;{{i18n "user.staff_counters.flags_given"}}
+          </div>
+          <div>
+            <a href="#">
+              <span class="flagged-posts">
+                {{@dummy.user.number_of_flagged_posts}}
+              </span>&nbsp;{{i18n "user.staff_counters.flagged_posts"}}
+            </a>
+          </div>
+          <div>
+            <a href="#">
+              <span class="deleted-posts">
+                {{@dummy.user.number_of_deleted_posts}}
+              </span>&nbsp;{{i18n "user.staff_counters.deleted_posts"}}
+            </a>
+          </div>
+          <div>
+            <span class="suspensions">
+              {{@dummy.user.number_of_suspensions}}
+            </span>&nbsp;{{i18n "user.staff_counters.suspensions"}}
+          </div>
+          <div>
+            <span class="warnings-received">
+              {{@dummy.user.warnings_received_count}}
+            </span>&nbsp;{{i18n "user.staff_counters.warnings_received"}}
           </div>
         </div>
-        <div style="clear: both"></div>
-      </div>
-    </section>
-  </section>
-</StyleguideExample>
 
-<StyleguideExample @title=".user-main .about.collapsed-info.has-background">
-  <section class="user-main">
-    <section
-      class="collapsed-info about has-background"
-      style={{@dummy.user.profileBackground}}
-    >
-      <div class="profile-image"></div>
-      <div class="details">
-        <div class="primary">
-          {{bound-avatar @dummy.user "huge"}}
-          <section class="controls">
-            <ul>
-              <li>
-                <a class="btn btn-primary">
-                  {{d-icon "envelope"}}
-                  {{i18n "user.private_message"}}
+        <div class="profile-image"></div>
+        <div class="details">
+          <div class="primary">
+            {{boundAvatar @dummy.user "huge"}}
+            <section class="controls">
+              <ul>
+                <li>
+                  <a class="btn btn-primary">
+                    {{icon "envelope"}}
+                    {{i18n "user.private_message"}}
+                  </a>
+                </li>
+                <li>
+                  <a href={{@dummy.user.adminPath}} class="btn">
+                    {{icon "wrench"}}
+                    {{i18n "admin.user.show_admin_profile"}}
+                  </a>
+                </li>
+              </ul>
+            </section>
+
+            <div class="primary-textual">
+              <h1 class="username">
+                {{@dummy.user.username}}
+                {{icon "shield-halved"}}
+              </h1>
+              <h2 class="full-name">{{@dummy.user.name}}</h2>
+              <h3>{{@dummy.user.title}}</h3>
+              <h3>
+                {{icon "location-dot"}}
+                {{@dummy.user.location}}
+                {{icon "globe"}}
+                <a
+                  href={{@dummy.user.website}}
+                  rel="nofollow noopener noreferrer"
+                  target="_blank"
+                >
+                  {{@dummy.user.website_name}}
                 </a>
-              </li>
-              <li>
-                <a href={{@dummy.user.adminPath}} class="btn">
-                  {{d-icon "wrench"}}
-                  {{i18n "admin.user.show_admin_profile"}}
-                </a>
-              </li>
-              <li>
-                <a href="#" class="btn">
-                  {{d-icon "angles-down"}}
-                  {{i18n "user.expand_profile"}}
-                </a>
-              </li>
-            </ul>
-          </section>
+              </h3>
 
-          <div class="primary-textual">
-            <h1 class="username">
-              {{@dummy.user.username}}
-              {{d-icon "shield-halved"}}
-            </h1>
-            <h2 class="full-name">{{@dummy.user.name}}</h2>
-            <h3>{{@dummy.user.title}}</h3>
-          </div>
-        </div>
-        <div style="clear: both"></div>
-      </div>
-    </section>
-  </section>
-</StyleguideExample>
-
-<StyleguideExample @title=".user-main .about.no-background">
-  <section class="user-main">
-    <section class="about no-background">
-
-      <div class="staff-counters">
-        <div>
-          <span class="helpful-flags">
-            {{@dummy.user.number_of_flags_given}}
-          </span>&nbsp;{{i18n "user.staff_counters.flags_given"}}
-        </div>
-        <div>
-          <a href="#">
-            <span class="flagged-posts">
-              {{@dummy.user.number_of_flagged_posts}}
-            </span>&nbsp;{{i18n "user.staff_counters.flagged_posts"}}
-          </a>
-        </div>
-        <div>
-          <a href="#">
-            <span class="deleted-posts">
-              {{@dummy.user.number_of_deleted_posts}}
-            </span>&nbsp;{{i18n "user.staff_counters.deleted_posts"}}
-          </a>
-        </div>
-        <div>
-          <span class="suspensions">
-            {{@dummy.user.number_of_suspensions}}
-          </span>&nbsp;{{i18n "user.staff_counters.suspensions"}}
-        </div>
-        <div>
-          <span class="warnings-received">
-            {{@dummy.user.warnings_received_count}}
-          </span>&nbsp;{{i18n "user.staff_counters.warnings_received"}}
-        </div>
-      </div>
-
-      <div class="profile-image"></div>
-      <div class="details">
-        <div class="primary">
-          {{bound-avatar @dummy.user "huge"}}
-          <section class="controls">
-            <ul>
-              <li>
-                <a class="btn btn-primary">
-                  {{d-icon "envelope"}}
-                  {{i18n "user.private_message"}}
-                </a>
-              </li>
-              <li>
-                <a href={{@dummy.user.adminPath}} class="btn">
-                  {{d-icon "wrench"}}
-                  {{i18n "admin.user.show_admin_profile"}}
-                </a>
-              </li>
-            </ul>
-          </section>
-
-          <div class="primary-textual">
-            <h1 class="username">
-              {{@dummy.user.username}}
-              {{d-icon "shield-halved"}}
-            </h1>
-            <h2 class="full-name">{{@dummy.user.name}}</h2>
-            <h3>{{@dummy.user.title}}</h3>
-            <h3>
-              {{d-icon "location-dot"}}
-              {{@dummy.user.location}}
-              {{d-icon "globe"}}
-              <a
-                href={{@dummy.user.website}}
-                rel="nofollow noopener noreferrer"
-                target="_blank"
-              >
-                {{@dummy.user.website_name}}
-              </a>
-            </h3>
-
-            <div class="bio">
-              <div class="suspended">
-                {{d-icon "ban"}}
-                <b>
-                  {{i18n
-                    "user.suspended_notice"
-                    date=@dummy.user.suspendedTillDate
-                  }}
-                </b>
-                <br />
-                <b>{{i18n "user.suspended_reason"}}</b>
-                {{@dummy.user.suspend_reason}}
+              <div class="bio">
+                <div class="suspended">
+                  {{icon "ban"}}
+                  <b>
+                    {{i18n
+                      "user.suspended_notice"
+                      date=@dummy.user.suspendedTillDate
+                    }}
+                  </b>
+                  <br />
+                  <b>{{i18n "user.suspended_reason"}}</b>
+                  {{@dummy.user.suspend_reason}}
+                </div>
+                {{htmlSafe @dummy.user.bio_cooked}}
               </div>
-              {{html-safe @dummy.user.bio_cooked}}
-            </div>
 
-            <div class="public-user-fields">
-              {{#each @dummy.user.publicUserFields as |uf|}}
-                {{#if uf.value}}
-                  <div class="public-user-field {{uf.field.dasherized_name}}">
-                    <span class="user-field-name">{{uf.field.name}}
-                    </span>:
-                    <span class="user-field-value">{{uf.value}}
-                    </span>
-                  </div>
-                {{/if}}
-              {{/each}}
-            </div>
-          </div>
-        </div>
-        <div style="clear: both"></div>
-      </div>
-
-      <div class="secondary">
-        <dl>
-          <dt>{{i18n "user.created"}}</dt>
-          <dd>{{bound-date @dummy.user.created_at}}</dd>
-          <dt>{{i18n "user.last_posted"}}</dt>
-          <dd>{{bound-date @dummy.user.last_posted_at}}</dd>
-          <dt>{{i18n "user.last_seen"}}</dt>
-          <dd>{{bound-date @dummy.user.last_seen_at}}</dd>
-          <dt>{{i18n "views"}}</dt>
-          <dd>{{@dummy.user.profile_view_count}}</dd>
-          <dt class="invited-by">{{i18n "user.invited_by"}}</dt>
-          <dd class="invited-by">
-            <a href="#">{{@dummy.user.invited_by.username}}</a>
-          </dd>
-          <dt class="trust-level">{{i18n "user.trust_level"}}</dt>
-          <dd class="trust-level">{{@dummy.user.trustLevel.name}}</dd>
-          <dt>{{i18n "user.email.title"}}</dt>
-          <dd title={{@dummy.user.email}}>
-            <DButton
-              @icon="envelope"
-              @label="admin.users.check_email.text"
-              class="btn-primary"
-            />
-          </dd>
-          <dt class="groups">
-            {{i18n "groups.title" count=@dummy.user.displayGroups.length}}
-          </dt>
-          <dd class="groups">
-            {{#each @dummy.user.displayGroups as |group|}}
-              <span>
-                <a href="#" class="group-link">{{group.name}}</a>
-              </span>
-            {{/each}}
-          </dd>
-          <DButton
-            @icon="triangle-exclamation"
-            @label="user.admin_delete"
-            class="btn-danger"
-          />
-        </dl>
-      </div>
-    </section>
-  </section>
-</StyleguideExample>
-
-<StyleguideExample @title=".user-main .about.has-background">
-  <section class="user-main">
-    <section
-      class="about has-background"
-      style={{@dummy.user.profileBackground}}
-    >
-      <div class="staff-counters">
-        <div>
-          <span class="helpful-flags">
-            {{@dummy.user.number_of_flags_given}}
-          </span>&nbsp;{{i18n "user.staff_counters.flags_given"}}
-        </div>
-        <div>
-          <a href="#">
-            <span class="flagged-posts">
-              {{@dummy.user.number_of_flagged_posts}}
-            </span>&nbsp;{{i18n "user.staff_counters.flagged_posts"}}
-          </a>
-        </div>
-        <div>
-          <a href="#">
-            <span class="deleted-posts">
-              {{@dummy.user.number_of_deleted_posts}}
-            </span>&nbsp;{{i18n "user.staff_counters.deleted_posts"}}
-          </a>
-        </div>
-        <div>
-          <span class="suspensions">
-            {{@dummy.user.number_of_suspensions}}
-          </span>&nbsp;{{i18n "user.staff_counters.suspensions"}}
-        </div>
-        <div>
-          <span class="warnings-received">
-            {{@dummy.user.warnings_received_count}}
-          </span>&nbsp;{{i18n "user.staff_counters.warnings_received"}}
-        </div>
-      </div>
-
-      <div class="profile-image"></div>
-      <div class="details">
-        <div class="primary">
-          {{bound-avatar @dummy.user "huge"}}
-          <section class="controls">
-            <ul>
-              <li>
-                <a class="btn btn-primary">
-                  {{d-icon "envelope"}}
-                  {{i18n "user.private_message"}}
-                </a>
-              </li>
-              <li>
-                <a href={{@dummy.user.adminPath}} class="btn">
-                  {{d-icon "wrench"}}
-                  {{i18n "admin.user.show_admin_profile"}}
-                </a>
-              </li>
-            </ul>
-          </section>
-
-          <div class="primary-textual">
-            <h1 class="username">
-              {{@dummy.user.username}}
-              {{d-icon "shield-halved"}}
-            </h1>
-            <h2 class="full-name">{{@dummy.user.name}}</h2>
-            <h3>{{@dummy.user.title}}</h3>
-            <h3>
-              {{d-icon "location-dot"}}
-              {{@dummy.user.location}}
-              {{d-icon "globe"}}
-              <a
-                href={{@dummy.user.website}}
-                rel="nofollow noopener noreferrer"
-                target="_blank"
-              >
-                {{@dummy.user.website_name}}
-              </a>
-            </h3>
-
-            <div class="bio">
-              <div class="suspended">
-                {{d-icon "ban"}}
-                <b>
-                  {{i18n
-                    "user.suspended_notice"
-                    date=@dummy.user.suspendedTillDate
-                  }}
-                </b>
-                <br />
-                <b>{{i18n "user.suspended_reason"}}</b>
-                {{@dummy.user.suspend_reason}}
+              <div class="public-user-fields">
+                {{#each @dummy.user.publicUserFields as |uf|}}
+                  {{#if uf.value}}
+                    <div class="public-user-field {{uf.field.dasherized_name}}">
+                      <span class="user-field-name">{{uf.field.name}}
+                      </span>:
+                      <span class="user-field-value">{{uf.value}}
+                      </span>
+                    </div>
+                  {{/if}}
+                {{/each}}
               </div>
-              {{html-safe @dummy.user.bio_cooked}}
-            </div>
-
-            <div class="public-user-fields">
-              {{#each @dummy.user.publicUserFields as |uf|}}
-                {{#if uf.value}}
-                  <div class="public-user-field {{uf.field.dasherized_name}}">
-                    <span class="user-field-name">{{uf.field.name}}</span>:
-                    <span class="user-field-value">{{uf.value}}</span>
-                  </div>
-                {{/if}}
-              {{/each}}
             </div>
           </div>
+          <div style="clear: both"></div>
         </div>
-        <div style="clear: both"></div>
-      </div>
 
-      <div class="secondary">
-        <dl>
-          <dt>{{i18n "user.created"}}</dt>
-          <dd>{{bound-date @dummy.user.created_at}}</dd>
-          <dt>{{i18n "user.last_posted"}}</dt>
-          <dd>{{bound-date @dummy.user.last_posted_at}}</dd>
-          <dt>{{i18n "user.last_seen"}}</dt>
-          <dd>{{bound-date @dummy.user.last_seen_at}}</dd>
-          <dt>{{i18n "views"}}</dt>
-          <dd>{{@dummy.user.profile_view_count}}</dd>
-          <dt class="invited-by">{{i18n "user.invited_by"}}</dt>
-          <dd class="invited-by">
-            <a href="#">{{@dummy.user.invited_by.username}}</a>
-          </dd>
-          <dt class="trust-level">{{i18n "user.trust_level"}}</dt>
-          <dd class="trust-level">{{@dummy.user.trustLevel.name}}</dd>
-          <dt>{{i18n "user.email.title"}}</dt>
-          <dd title={{@dummy.user.email}}>
+        <div class="secondary">
+          <dl>
+            <dt>{{i18n "user.created"}}</dt>
+            <dd>{{boundDate @dummy.user.created_at}}</dd>
+            <dt>{{i18n "user.last_posted"}}</dt>
+            <dd>{{boundDate @dummy.user.last_posted_at}}</dd>
+            <dt>{{i18n "user.last_seen"}}</dt>
+            <dd>{{boundDate @dummy.user.last_seen_at}}</dd>
+            <dt>{{i18n "views"}}</dt>
+            <dd>{{@dummy.user.profile_view_count}}</dd>
+            <dt class="invited-by">{{i18n "user.invited_by"}}</dt>
+            <dd class="invited-by">
+              <a href="#">{{@dummy.user.invited_by.username}}</a>
+            </dd>
+            <dt class="trust-level">{{i18n "user.trust_level"}}</dt>
+            <dd class="trust-level">{{@dummy.user.trustLevel.name}}</dd>
+            <dt>{{i18n "user.email.title"}}</dt>
+            <dd title={{@dummy.user.email}}>
+              <DButton
+                @icon="envelope"
+                @label="admin.users.check_email.text"
+                class="btn-primary"
+              />
+            </dd>
+            <dt class="groups">
+              {{i18n "groups.title" count=@dummy.user.displayGroups.length}}
+            </dt>
+            <dd class="groups">
+              {{#each @dummy.user.displayGroups as |group|}}
+                <span>
+                  <a href="#" class="group-link">{{group.name}}</a>
+                </span>
+              {{/each}}
+            </dd>
             <DButton
-              @icon="envelope"
-              @label="admin.users.check_email.text"
-              class="btn-primary"
+              @icon="triangle-exclamation"
+              @label="user.admin_delete"
+              class="btn-danger"
             />
-          </dd>
-          <dt class="groups">
-            {{i18n "groups.title" count=@dummy.user.displayGroups.length}}
-          </dt>
-          <dd class="groups">
-            {{#each @dummy.user.displayGroups as |group|}}
-              <span>
-                <a href="#" class="group-link">{{group.name}}</a>
-              </span>
-            {{/each}}
-          </dd>
-          <DButton
-            @icon="triangle-exclamation"
-            @label="user.admin_delete"
-            class="btn-danger"
-          />
-        </dl>
-      </div>
+          </dl>
+        </div>
+      </section>
     </section>
-  </section>
-</StyleguideExample>
\ No newline at end of file
+  </StyleguideExample>
+
+  <StyleguideExample @title=".user-main .about.has-background">
+    <section class="user-main">
+      <section
+        class="about has-background"
+        style={{@dummy.user.profileBackground}}
+      >
+        <div class="staff-counters">
+          <div>
+            <span class="helpful-flags">
+              {{@dummy.user.number_of_flags_given}}
+            </span>&nbsp;{{i18n "user.staff_counters.flags_given"}}
+          </div>
+          <div>
+            <a href="#">
+              <span class="flagged-posts">
+                {{@dummy.user.number_of_flagged_posts}}
+              </span>&nbsp;{{i18n "user.staff_counters.flagged_posts"}}
+            </a>
+          </div>
+          <div>
+            <a href="#">
+              <span class="deleted-posts">
+                {{@dummy.user.number_of_deleted_posts}}
+              </span>&nbsp;{{i18n "user.staff_counters.deleted_posts"}}
+            </a>
+          </div>
+          <div>
+            <span class="suspensions">
+              {{@dummy.user.number_of_suspensions}}
+            </span>&nbsp;{{i18n "user.staff_counters.suspensions"}}
+          </div>
+          <div>
+            <span class="warnings-received">
+              {{@dummy.user.warnings_received_count}}
+            </span>&nbsp;{{i18n "user.staff_counters.warnings_received"}}
+          </div>
+        </div>
+
+        <div class="profile-image"></div>
+        <div class="details">
+          <div class="primary">
+            {{boundAvatar @dummy.user "huge"}}
+            <section class="controls">
+              <ul>
+                <li>
+                  <a class="btn btn-primary">
+                    {{icon "envelope"}}
+                    {{i18n "user.private_message"}}
+                  </a>
+                </li>
+                <li>
+                  <a href={{@dummy.user.adminPath}} class="btn">
+                    {{icon "wrench"}}
+                    {{i18n "admin.user.show_admin_profile"}}
+                  </a>
+                </li>
+              </ul>
+            </section>
+
+            <div class="primary-textual">
+              <h1 class="username">
+                {{@dummy.user.username}}
+                {{icon "shield-halved"}}
+              </h1>
+              <h2 class="full-name">{{@dummy.user.name}}</h2>
+              <h3>{{@dummy.user.title}}</h3>
+              <h3>
+                {{icon "location-dot"}}
+                {{@dummy.user.location}}
+                {{icon "globe"}}
+                <a
+                  href={{@dummy.user.website}}
+                  rel="nofollow noopener noreferrer"
+                  target="_blank"
+                >
+                  {{@dummy.user.website_name}}
+                </a>
+              </h3>
+
+              <div class="bio">
+                <div class="suspended">
+                  {{icon "ban"}}
+                  <b>
+                    {{i18n
+                      "user.suspended_notice"
+                      date=@dummy.user.suspendedTillDate
+                    }}
+                  </b>
+                  <br />
+                  <b>{{i18n "user.suspended_reason"}}</b>
+                  {{@dummy.user.suspend_reason}}
+                </div>
+                {{htmlSafe @dummy.user.bio_cooked}}
+              </div>
+
+              <div class="public-user-fields">
+                {{#each @dummy.user.publicUserFields as |uf|}}
+                  {{#if uf.value}}
+                    <div class="public-user-field {{uf.field.dasherized_name}}">
+                      <span class="user-field-name">{{uf.field.name}}</span>:
+                      <span class="user-field-value">{{uf.value}}</span>
+                    </div>
+                  {{/if}}
+                {{/each}}
+              </div>
+            </div>
+          </div>
+          <div style="clear: both"></div>
+        </div>
+
+        <div class="secondary">
+          <dl>
+            <dt>{{i18n "user.created"}}</dt>
+            <dd>{{boundDate @dummy.user.created_at}}</dd>
+            <dt>{{i18n "user.last_posted"}}</dt>
+            <dd>{{boundDate @dummy.user.last_posted_at}}</dd>
+            <dt>{{i18n "user.last_seen"}}</dt>
+            <dd>{{boundDate @dummy.user.last_seen_at}}</dd>
+            <dt>{{i18n "views"}}</dt>
+            <dd>{{@dummy.user.profile_view_count}}</dd>
+            <dt class="invited-by">{{i18n "user.invited_by"}}</dt>
+            <dd class="invited-by">
+              <a href="#">{{@dummy.user.invited_by.username}}</a>
+            </dd>
+            <dt class="trust-level">{{i18n "user.trust_level"}}</dt>
+            <dd class="trust-level">{{@dummy.user.trustLevel.name}}</dd>
+            <dt>{{i18n "user.email.title"}}</dt>
+            <dd title={{@dummy.user.email}}>
+              <DButton
+                @icon="envelope"
+                @label="admin.users.check_email.text"
+                class="btn-primary"
+              />
+            </dd>
+            <dt class="groups">
+              {{i18n "groups.title" count=@dummy.user.displayGroups.length}}
+            </dt>
+            <dd class="groups">
+              {{#each @dummy.user.displayGroups as |group|}}
+                <span>
+                  <a href="#" class="group-link">{{group.name}}</a>
+                </span>
+              {{/each}}
+            </dd>
+            <DButton
+              @icon="triangle-exclamation"
+              @label="user.admin_delete"
+              class="btn-danger"
+            />
+          </dl>
+        </div>
+      </section>
+    </section>
+  </StyleguideExample>
+</template>;
+export default UserAbout;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/syntax/00-bem.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/syntax/00-bem.gjs
index 4a0e648a0d9..0532f1b0483 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/syntax/00-bem.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/syntax/00-bem.gjs
@@ -1,80 +1,83 @@
-<div class="section-description">
-  <p>
-    The guidelines outlines below strive to bring structure and consistency to
-    our classnames. Additionally, with this approach the nesting of css is
-    firmly reduced. BEM stands for:
+const Bem = <template>
+  <div class="section-description">
+    <p>
+      The guidelines outlines below strive to bring structure and consistency to
+      our classnames. Additionally, with this approach the nesting of css is
+      firmly reduced. BEM stands for:
+      <ul>
+        <li>Block</li>
+        <li>Element</li>
+        <li>Modifier</li>
+      </ul>
+    </p>
+    <p>We use a slightly modified version of the BEM classname format.</p>
+    <h3>Block</h3>
+    For example
+    <strong><code>d-modal</code></strong>
+    <p>A block is a standalone component. Blocks can be used within blocks. It
+      should be a "top-level" element, which could be used in its entirety in
+      another place of the app. It has no dependencies on any parent class.</p>
+    <h3>Element</h3>
+    For example
+    <strong><code>d-modal__header</code></strong>
+    <p>
+      An element is a part of a block that can not be used outside that context.
+      They because it depends on the parent class and can not be used standalone
+      outside this context. In the example above, an element with class
+      <code>d-modal__header</code>
+      will only work within the d-modal block, but not when placed elsewhere.
+    </p>
+    <h3>Modifiers</h3>
+    Examples
+    <strong><code>--success</code>,
+      <code>--large</code>,<code>--inline</code>,
+      <code>--highlighted</code></strong>
+    <p>
+      A modifier is used mainly for changing the appearance, if different than
+      the default. It is less than an element, and has no html structure of it
+      own. Meaning, it can only exist when applied to an element (or potentially
+      a block).
+    </p>
+    <p>In classic BEM, a modifier looks like:
+      <code>d-modal__header--success</code>. This can quickly turn into very
+      verbose HTML. Imagine an already long block-element name, for example:
+
+      <p>
+        <code>class="chat-message-creator__search-container"</code>
+      </p>
+
+      With classic BEM and 2 modifiers, it would look like this:
+
+      <p>
+        <code>class="chat-message-creator__search-container
+          chat-message-creator__search-container--highlighted
+          chat-message-creator__search-container--inline"</code>
+      </p>
+
+      To avoid this, we decouple our modifiers from the BE parts of the
+      classnames and use them as separate classes. So in the previous case with
+      2 modifiers this turns into:
+      <p>
+        <code>class="chat-message-creator__search-container --highlighted
+          --inline"</code>
+      </p>
+
+      which is far more readable.
+    </p>
+
+    <h4>Special modifiers</h4>
+    Some special prefixes are useful to identify modifiers as temporary states
+    or condition. These are:
     <ul>
-      <li>Block</li>
-      <li>Element</li>
-      <li>Modifier</li>
+      <li><code>is-foo</code> = example: is-open</li>
+      <li><code>has-foo</code> = example: has-errors</li>
     </ul>
-  </p>
-  <p>We use a slightly modified version of the BEM classname format.</p>
-  <h3>Block</h3>
-  For example
-  <strong><code>d-modal</code></strong>
-  <p>A block is a standalone component. Blocks can be used within blocks. It
-    should be a "top-level" element, which could be used in its entirety in
-    another place of the app. It has no dependencies on any parent class.</p>
-  <h3>Element</h3>
-  For example
-  <strong><code>d-modal__header</code></strong>
-  <p>
-    An element is a part of a block that can not be used outside that context.
-    They because it depends on the parent class and can not be used standalone
-    outside this context. In the example above, an element with class
-    <code>d-modal__header</code>
-    will only work within the d-modal block, but not when placed elsewhere.
-  </p>
-  <h3>Modifiers</h3>
-  Examples
-  <strong><code>--success</code>,
-    <code>--large</code>,<code>--inline</code>,
-    <code>--highlighted</code></strong>
-  <p>
-    A modifier is used mainly for changing the appearance, if different than the
-    default. It is less than an element, and has no html structure of it own.
-    Meaning, it can only exist when applied to an element (or potentially a
-    block).
-  </p>
-  <p>In classic BEM, a modifier looks like:
-    <code>d-modal__header--success</code>. This can quickly turn into very
-    verbose HTML. Imagine an already long block-element name, for example:
 
-    <p>
-      <code>class="chat-message-creator__search-container"</code>
-    </p>
-
-    With classic BEM and 2 modifiers, it would look like this:
-
-    <p>
-      <code>class="chat-message-creator__search-container
-        chat-message-creator__search-container--highlighted
-        chat-message-creator__search-container--inline"</code>
-    </p>
-
-    To avoid this, we decouple our modifiers from the BE parts of the classnames
-    and use them as separate classes. So in the previous case with 2 modifiers
-    this turns into:
-    <p>
-      <code>class="chat-message-creator__search-container --highlighted
-        --inline"</code>
-    </p>
-
-    which is far more readable.
-  </p>
-
-  <h4>Special modifiers</h4>
-  Some special prefixes are useful to identify modifiers as temporary states or
-  condition. These are:
-  <ul>
-    <li><code>is-foo</code> = example: is-open</li>
-    <li><code>has-foo</code> = example: has-errors</li>
-  </ul>
-
-  <h3>In Code</h3>
-  <p>Even though the BEM convention avoids nesting, we can use SCSS to write the
-    code nested. This is to taste, but I find it easier to read and write,
-    because it will keep all relevant elements and modifiers grouped together
-    and avoids unnecessary repetition of the block class.</p>
-</div>
\ No newline at end of file
+    <h3>In Code</h3>
+    <p>Even though the BEM convention avoids nesting, we can use SCSS to write
+      the code nested. This is to taste, but I find it easier to read and write,
+      because it will keep all relevant elements and modifiers grouped together
+      and avoids unnecessary repetition of the block class.</p>
+  </div>
+</template>;
+export default Bem;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.gjs b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.gjs
index bac2468d8a5..a006803de60 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.gjs
@@ -8,9 +8,11 @@ export default class StyleguideExample extends Component {
     super(...arguments);
     this.value = this.args.initialValue;
   }
-}
 
-<section class="styleguide-example">
-  <div class="example-title">{{@title}}</div>
-  <section class="rendered">{{yield this.value}}</section>
-</section>
\ No newline at end of file
+  <template>
+    <section class="styleguide-example">
+      <div class="example-title">{{@title}}</div>
+      <section class="rendered">{{yield this.value}}</section>
+    </section>
+  </template>
+}
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.gjs b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.gjs
index b13e377aede..1b3b7ca2a77 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.gjs
@@ -1,5 +1,6 @@
 import Component from "@ember/component";
 import { classNames, tagName } from "@ember-decorators/component";
+import icon from "discourse/helpers/d-icon";
 import { afterRender } from "discourse/lib/decorators";
 import { REPLACEMENTS } from "discourse/lib/icon-library";
 import discourseLater from "discourse/lib/later";
@@ -26,11 +27,13 @@ export default class StyleguideIcons extends Component {
       discourseLater(this, this.setIconIds, 1500);
     }
   }
-}
 
-{{#each this.iconIds as |id|}}
-  <div class="styleguide-icon">
-    {{d-icon id}}
-    <span>{{id}}</span>
-  </div>
-{{/each}}
\ No newline at end of file
+  <template>
+    {{#each this.iconIds as |id|}}
+      <div class="styleguide-icon">
+        {{icon id}}
+        <span>{{id}}</span>
+      </div>
+    {{/each}}
+  </template>
+}
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.gjs b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.gjs
index 2ac1c204bb3..14b314093f8 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.gjs
@@ -1,6 +1,13 @@
-<LinkTo
-  @route="styleguide.show"
-  @models={{array @section.category @section.id}}
->
-  {{section-title @section.id}}
-</LinkTo>
\ No newline at end of file
+import { array } from "@ember/helper";
+import { LinkTo } from "@ember/routing";
+import sectionTitle from "discourse/plugins/styleguide/discourse/helpers/section-title";
+
+const StyleguideLink = <template>
+  <LinkTo
+    @route="styleguide.show"
+    @models={{array @section.category @section.id}}
+  >
+    {{sectionTitle @section.id}}
+  </LinkTo>
+</template>;
+export default StyleguideLink;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.gjs b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.gjs
index 2a2156524ed..16c214117fd 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.gjs
@@ -1,6 +1,8 @@
 import Component from "@ember/component";
 import { classNameBindings, tagName } from "@ember-decorators/component";
 import computed from "discourse/lib/decorators";
+import { i18n } from "discourse-i18n";
+import sectionTitle from "discourse/plugins/styleguide/discourse/helpers/section-title";
 
 @tagName("section")
 @classNameBindings(":styleguide-section", "sectionClass")
@@ -16,16 +18,18 @@ export default class StyleguideSection extends Component {
       return `${section.id}-examples`;
     }
   }
+
+  <template>
+    <h1 class="section-title">
+      {{#if this.section}}
+        {{sectionTitle this.section.id}}
+      {{else}}
+        {{i18n this.title}}
+      {{/if}}
+    </h1>
+
+    <div class="styleguide-section-contents">
+      {{yield}}
+    </div>
+  </template>
 }
-
-<h1 class="section-title">
-  {{#if this.section}}
-    {{section-title this.section.id}}
-  {{else}}
-    {{i18n this.title}}
-  {{/if}}
-</h1>
-
-<div class="styleguide-section-contents">
-  {{yield}}
-</div>
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide/calendar-date-time-input.gjs b/plugins/styleguide/assets/javascripts/discourse/components/styleguide/calendar-date-time-input.gjs
index 46d3101a520..fe0a2d0a76e 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide/calendar-date-time-input.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide/calendar-date-time-input.gjs
@@ -1,7 +1,14 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
+import { Input } from "@ember/component";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
+import CalendarDateTimeInput from "discourse/components/calendar-date-time-input";
+import DatePicker from "discourse/components/date-picker";
+import StyleguideComponent from "discourse/plugins/styleguide/discourse/components/styleguide/component";
+import Controls from "discourse/plugins/styleguide/discourse/components/styleguide/controls";
+import Row from "discourse/plugins/styleguide/discourse/components/styleguide/controls/row";
+import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
 
 export default class StyleguideCalendarDateTimeInput extends Component {
   @service currentUser;
@@ -21,39 +28,41 @@ export default class StyleguideCalendarDateTimeInput extends Component {
   changeTime(time) {
     this.time = time;
   }
+
+  <template>
+    <StyleguideExample @title="<CalendarDateTimeInput>">
+      <StyleguideComponent>
+        <CalendarDateTimeInput
+          @datePickerId="styleguide"
+          @date={{this.date}}
+          @time={{this.time}}
+          @minDate={{this.minDate}}
+          @timeFormat={{this.timeFormat}}
+          @dateFormat={{this.dateFormat}}
+          @onChangeDate={{this.changeDate}}
+          @onChangeTime={{this.changeTime}}
+        />
+      </StyleguideComponent>
+
+      <Controls>
+        <Row @name="Min date">
+          <DatePicker @defaultDate="YYYY-MM-DD" @value={{this.minDate}} />
+        </Row>
+
+        <Row @name="Date">
+          <DatePicker @defaultDate="YYYY-MM-DD" @value={{this.date}} />
+        </Row>
+
+        <Row @name="Time">
+          <Input
+            maxlength={{5}}
+            placeholder="hh:mm"
+            @type="time"
+            @value={{this.time}}
+            class="time-picker"
+          />
+        </Row>
+      </Controls>
+    </StyleguideExample>
+  </template>
 }
-
-<StyleguideExample @title="<CalendarDateTimeInput>">
-  <Styleguide::Component>
-    <CalendarDateTimeInput
-      @datePickerId="styleguide"
-      @date={{this.date}}
-      @time={{this.time}}
-      @minDate={{this.minDate}}
-      @timeFormat={{this.timeFormat}}
-      @dateFormat={{this.dateFormat}}
-      @onChangeDate={{this.changeDate}}
-      @onChangeTime={{this.changeTime}}
-    />
-  </Styleguide::Component>
-
-  <Styleguide::Controls>
-    <Styleguide::Controls::Row @name="Min date">
-      <DatePicker @defaultDate="YYYY-MM-DD" @value={{this.minDate}} />
-    </Styleguide::Controls::Row>
-
-    <Styleguide::Controls::Row @name="Date">
-      <DatePicker @defaultDate="YYYY-MM-DD" @value={{this.date}} />
-    </Styleguide::Controls::Row>
-
-    <Styleguide::Controls::Row @name="Time">
-      <Input
-        maxlength={{5}}
-        placeholder="hh:mm"
-        @type="time"
-        @value={{this.time}}
-        class="time-picker"
-      />
-    </Styleguide::Controls::Row>
-  </Styleguide::Controls>
-</StyleguideExample>
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide/component.gjs b/plugins/styleguide/assets/javascripts/discourse/components/styleguide/component.gjs
index 5a7e89d45b0..cfe773b778d 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide/component.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide/component.gjs
@@ -1,35 +1,40 @@
-<div class="styleguide__component">
-  {{#if @tag}}
-    <span class="styleguide__component-tag">{{@tag}}</span>
-  {{/if}}
+import { or } from "truth-helpers";
 
-  {{#if (has-block "title")}}
-    <div class="styleguide__component-title">
-      {{yield to="title"}}
-    </div>
-  {{/if}}
+const Component = <template>
+  <div class="styleguide__component">
+    {{#if @tag}}
+      <span class="styleguide__component-tag">{{@tag}}</span>
+    {{/if}}
 
-  {{#if (or (has-block) (has-block "sample"))}}
-    <div class="styleguide__component-sample">
-      {{#if (has-block)}}
-        {{yield}}
-      {{/if}}
+    {{#if (has-block "title")}}
+      <div class="styleguide__component-title">
+        {{yield to="title"}}
+      </div>
+    {{/if}}
 
-      {{#if (has-block "sample")}}
-        {{yield to="sample"}}
-      {{/if}}
-    </div>
-  {{/if}}
+    {{#if (or (has-block) (has-block "sample"))}}
+      <div class="styleguide__component-sample">
+        {{#if (has-block)}}
+          {{yield}}
+        {{/if}}
 
-  {{#if (has-block "actions")}}
-    <div class="styleguide__component-actions">
-      {{yield to="actions"}}
-    </div>
-  {{/if}}
+        {{#if (has-block "sample")}}
+          {{yield to="sample"}}
+        {{/if}}
+      </div>
+    {{/if}}
 
-  {{#if (has-block "code")}}
-    <div class="styleguide__component-code">
-      {{yield to="code"}}
-    </div>
-  {{/if}}
-</div>
\ No newline at end of file
+    {{#if (has-block "actions")}}
+      <div class="styleguide__component-actions">
+        {{yield to="actions"}}
+      </div>
+    {{/if}}
+
+    {{#if (has-block "code")}}
+      <div class="styleguide__component-code">
+        {{yield to="code"}}
+      </div>
+    {{/if}}
+  </div>
+</template>;
+export default Component;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide/controls.gjs b/plugins/styleguide/assets/javascripts/discourse/components/styleguide/controls.gjs
index 42d3152a89c..568aeaa2fb7 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide/controls.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide/controls.gjs
@@ -1,5 +1,8 @@
-<table class="component-properties">
-  <tbody>
-    {{yield}}
-  </tbody>
-</table>
\ No newline at end of file
+const Controls = <template>
+  <table class="component-properties">
+    <tbody>
+      {{yield}}
+    </tbody>
+  </table>
+</template>;
+export default Controls;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide/controls/row.gjs b/plugins/styleguide/assets/javascripts/discourse/components/styleguide/controls/row.gjs
index 20f1b586a6d..71a3ca0146d 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide/controls/row.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide/controls/row.gjs
@@ -1,8 +1,11 @@
-<tr class="component-properties__row">
-  {{#if @name}}
-    <td class="component-properties__cell">{{@name}}</td>
-  {{/if}}
-  <td class="component-properties__cell">
-    {{yield}}
-  </td>
-</tr>
\ No newline at end of file
+const Row = <template>
+  <tr class="component-properties__row">
+    {{#if @name}}
+      <td class="component-properties__cell">{{@name}}</td>
+    {{/if}}
+    <td class="component-properties__cell">
+      {{yield}}
+    </td>
+  </tr>
+</template>;
+export default Row;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide/controls/toggle.gjs b/plugins/styleguide/assets/javascripts/discourse/components/styleguide/controls/toggle.gjs
index e4c7fc4720d..f753d19fb56 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide/controls/toggle.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide/controls/toggle.gjs
@@ -1 +1,7 @@
-<DToggleSwitch @state={{@enabled}} {{on "click" @action}} />
\ No newline at end of file
+import { on } from "@ember/modifier";
+import DToggleSwitch from "discourse/components/d-toggle-switch";
+
+const Toggle = <template>
+  <DToggleSwitch @state={{@enabled}} {{on "click" @action}} />
+</template>;
+export default Toggle;
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.gjs b/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.gjs
index 902e1e509fe..fa4300cc63f 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.gjs
@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
 import { loadColorSchemeStylesheet } from "discourse/lib/color-scheme-picker";
 import { currentThemeId } from "discourse/lib/theme-selector";
 
@@ -81,8 +82,10 @@ export default class ToggleColorMode extends Component {
     this.colorSchemeOverride = this.colorSchemeOverride === DARK ? LIGHT : DARK;
     colorSchemeOverride(this.colorSchemeOverride);
   }
-}
 
-{{#if this.shouldRender}}
-  <DButton @action={{this.toggle}} class="toggle-color-mode">Toggle color</DButton>
-{{/if}}
\ No newline at end of file
+  <template>
+    {{#if this.shouldRender}}
+      <DButton @action={{this.toggle}} class="toggle-color-mode">Toggle color</DButton>
+    {{/if}}
+  </template>
+}
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide.gjs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide.gjs
index ee4dd54db9e..8f4132973f2 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide.gjs
@@ -1,20 +1,30 @@
-<section class="styleguide">
-  <section class="styleguide-menu">
-    <ToggleColorMode />
+import { concat } from "@ember/helper";
+import RouteTemplate from "ember-route-template";
+import { i18n } from "discourse-i18n";
+import StyleguideLink from "discourse/plugins/styleguide/discourse/components/styleguide-link";
+import ToggleColorMode from "discourse/plugins/styleguide/discourse/components/toggle-color-mode";
 
-    {{#each this.categories as |c|}}
-      <ul>
-        <li class="styleguide-heading">
-          {{i18n (concat "styleguide.categories." c.id)}}
-        </li>
-        {{#each c.sections as |s|}}
-          <li><StyleguideLink @section={{s}} /></li>
+export default RouteTemplate(
+  <template>
+    <section class="styleguide">
+      <section class="styleguide-menu">
+        <ToggleColorMode />
+
+        {{#each @controller.categories as |c|}}
+          <ul>
+            <li class="styleguide-heading">
+              {{i18n (concat "styleguide.categories." c.id)}}
+            </li>
+            {{#each c.sections as |s|}}
+              <li><StyleguideLink @section={{s}} /></li>
+            {{/each}}
+          </ul>
         {{/each}}
-      </ul>
-    {{/each}}
-  </section>
+      </section>
 
-  <section class="styleguide-contents">
-    {{outlet}}
-  </section>
-</section>
\ No newline at end of file
+      <section class="styleguide-contents">
+        {{outlet}}
+      </section>
+    </section>
+  </template>
+);
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/index.gjs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/index.gjs
index e0fe882bc2e..1239f2066cd 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/index.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/index.gjs
@@ -1,5 +1,13 @@
-<StyleguideSection @title="styleguide.title">
-  <div class="description">
-    {{i18n "styleguide.welcome"}}
-  </div>
-</StyleguideSection>
\ No newline at end of file
+import RouteTemplate from "ember-route-template";
+import { i18n } from "discourse-i18n";
+import StyleguideSection from "discourse/plugins/styleguide/discourse/components/styleguide-section";
+
+export default RouteTemplate(
+  <template>
+    <StyleguideSection @title="styleguide.title">
+      <div class="description">
+        {{i18n "styleguide.welcome"}}
+      </div>
+    </StyleguideSection>
+  </template>
+);
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/show.gjs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/show.gjs
index 00a3b9961d3..25edfe9a56c 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/show.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/show.gjs
@@ -1,9 +1,16 @@
-<StyleguideSection @section={{this.section}}>
-  {{#let this.section.component as |SectionComponent|}}
-    <SectionComponent
-      @dummy={{this.dummy}}
-      @dummyAction={{this.dummyAction}}
-      @siteSettings={{this.siteSettings}}
-    />
-  {{/let}}
-</StyleguideSection>
\ No newline at end of file
+import RouteTemplate from "ember-route-template";
+import StyleguideSection from "discourse/plugins/styleguide/discourse/components/styleguide-section";
+
+export default RouteTemplate(
+  <template>
+    <StyleguideSection @section={{@controller.section}}>
+      {{#let @controller.section.component as |SectionComponent|}}
+        <SectionComponent
+          @dummy={{@controller.dummy}}
+          @dummyAction={{@controller.dummyAction}}
+          @siteSettings={{@controller.siteSettings}}
+        />
+      {{/let}}
+    </StyleguideSection>
+  </template>
+);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4563a1db885..c01c74f49ac 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -933,6 +933,9 @@ importers:
       ember-template-imports:
         specifier: ^4.3.0
         version: 4.3.0
+      truth-helpers:
+        specifier: workspace:*
+        version: link:../truth-helpers
     devDependencies:
       '@ember/optional-features':
         specifier: ^2.2.0