Merge pull request #15153 from hashicorp/ui/chore/update-icons-to-use-flight-icons-component

ui: update icons to use flight icons component

ui/packages/consul-ui/app/components/consul/auth-method/search-bar/index.hbs

@@ -1,31 +1,29 @@
-<SearchBar
-  class="consul-auth-method-search-bar"
-  ...attributes
-  @filter={{@filter}}
->
+<SearchBar class='consul-auth-method-search-bar' ...attributes @filter={{@filter}}>
   <:status as |search|>
 
     {{#let
-
-  (t (concat "components.consul.auth-method.search-bar." search.status.key ".name")
+      (t
+        (concat 'components.consul.auth-method.search-bar.' search.status.key '.name')
         default=(array
-        (concat "common.search." search.status.key)
-        (concat "common.consul." search.status.key)
+          (concat 'common.search.' search.status.key) (concat 'common.consul.' search.status.key)
         )
       )
-
-  (t (concat "components.consul.auth-method.search-bar." search.status.key ".options." search.status.value)
+      (t
+        (concat
+          'components.consul.auth-method.search-bar.'
+          search.status.key
+          '.options.'
+          search.status.value
+        )
         default=(array
-        (concat "common.search." search.status.value)
-        (concat "common.consul." search.status.value)
-        (concat "common.brand." search.status.value)
+          (concat 'common.search.' search.status.value)
+          (concat 'common.consul.' search.status.value)
+          (concat 'common.brand.' search.status.value)
         )
       )
-
-as |key value|}}
-      <search.RemoveFilter
-        aria-label={{t "common.ui.remove" item=(concat key " " value)}}
-      >
+      as |key value|
+    }}
+      <search.RemoveFilter aria-label={{t 'common.ui.remove' item=(concat key ' ' value)}}>
         <dl>
           <dt>{{key}}</dt>
           <dd>{{value}}</dd>
@@ -38,25 +36,26 @@ as |key value|}}
     <search.Search
       @onsearch={{action @onsearch}}
       @value={{@search}}
-        @placeholder={{t "common.search.search"}}
+      @placeholder={{t 'common.search.search'}}
     >
       <search.Select
-          class="type-search-properties"
-          @position="right"
+        class='type-search-properties'
+        @position='right'
         @onchange={{action @filter.searchproperty.change}}
         @multiple={{true}}
         @required={{true}}
-        as |components|>
-          <BlockSlot @name="selected">
+        as |components|
+      >
+        <BlockSlot @name='selected'>
           <span>
-              {{t "common.search.searchproperty"}}
+            {{t 'common.search.searchproperty'}}
           </span>
         </BlockSlot>
-          <BlockSlot @name="options">
+        <BlockSlot @name='options'>
           {{#let components.Optgroup components.Option as |Optgroup Option|}}
             {{#each @filter.searchproperty.default as |prop|}}
               <Option @value={{prop}} @selected={{includes prop @filter.searchproperty.value}}>
-                {{t (concat "common.consul." (lowercase prop))}}
+                {{t (concat 'common.consul.' (lowercase prop))}}
               </Option>
             {{/each}}
           {{/let}}
@@ -66,42 +65,59 @@ as |key value|}}
   </:search>
   <:filter as |search|>
     <search.Select
-        class="type-kind"
-        @position="left"
+      class='type-kind'
+      @position='left'
       @onchange={{action @filter.kind.change}}
       @multiple={{true}}
-      as |components|>
-        <BlockSlot @name="selected">
+      as |components|
+    >
+      <BlockSlot @name='selected'>
         <span>
-            {{t "components.consul.auth-method.search-bar.kind.name"}}
+          {{t 'components.consul.auth-method.search-bar.kind.name'}}
         </span>
       </BlockSlot>
-        <BlockSlot @name="options">
+      <BlockSlot @name='options'>
         {{#let components.Optgroup components.Option as |Optgroup Option|}}
-          <Option class="kubernetes" @value="kubernetes" @selected={{includes 'kubernetes' @filter.kind.value}}>Kubernetes</Option>
-          <Option class="jwt" @value="jwt" @selected={{includes 'jwt' @filter.kind.value}}>JWT</Option>
+          <Option @value='kubernetes' @selected={{includes 'kubernetes' @filter.kind.value}}>
+            <FlightIcon @name='kubernetes-color' class='mr-2.5' />
+            Kubernetes
+          </Option>
+          <Option
+            class='jwt'
+            @value='jwt'
+            @selected={{includes 'jwt' @filter.kind.value}}
+          >JWT</Option>
           {{#if (env 'CONSUL_SSO_ENABLED')}}
-          <Option class="oidc" @value="oidc" @selected={{includes 'oidc' @filter.kind.value}}>OIDC</Option>
+            <Option
+              class='oidc'
+              @value='oidc'
+              @selected={{includes 'oidc' @filter.kind.value}}
+            >OIDC</Option>
           {{/if}}
         {{/let}}
       </BlockSlot>
     </search.Select>
     <search.Select
-        class="type-locality"
-        @position="left"
+      class='type-locality'
+      @position='left'
       @onchange={{action @filter.source.change}}
       @multiple={{true}}
-      as |components|>
-        <BlockSlot @name="selected">
+      as |components|
+    >
+      <BlockSlot @name='selected'>
         <span>
-            {{t "components.consul.auth-method.search-bar.locality.name"}}
+          {{t 'components.consul.auth-method.search-bar.locality.name'}}
         </span>
       </BlockSlot>
-        <BlockSlot @name="options">
+      <BlockSlot @name='options'>
         {{#let components.Optgroup components.Option as |Optgroup Option|}}
-        {{#each (array "local" "global") as |option|}}
-          <Option class="{{option}}" @value={{option}} @selected={{includes option @filter.types}}>
-            {{t (concat "components.consul.auth-method.search-bar.locality.options." option)}}
+          {{#each (array 'local' 'global') as |option|}}
+            <Option
+              class='{{option}}'
+              @value={{option}}
+              @selected={{includes option @filter.types}}
+            >
+              {{t (concat 'components.consul.auth-method.search-bar.locality.options.' option)}}
             </Option>
           {{/each}}
         {{/let}}
@@ -110,36 +126,48 @@ as |key value|}}
   </:filter>
   <:sort as |search|>
     <search.Select
-        class="type-sort"
+      class='type-sort'
       data-test-sort-control
-        @position="right"
+      @position='right'
       @onchange={{action @sort.change}}
       @multiple={{false}}
       @required={{true}}
-      as |components|>
-        <BlockSlot @name="selected">
+      as |components|
+    >
+      <BlockSlot @name='selected'>
         <span>
-            {{#let (from-entries (array
-                  (array "MethodName:asc" (t "common.sort.alpha.asc"))
-                  (array "MethodName:desc" (t "common.sort.alpha.desc"))
-                  (array "TokenTTL:desc" (t "common.sort.duration.asc"))
-                  (array "TokenTTL:asc" (t "common.sort.duration.desc"))
-                ))
+          {{#let
+            (from-entries
+              (array
+                (array 'MethodName:asc' (t 'common.sort.alpha.asc'))
+                (array 'MethodName:desc' (t 'common.sort.alpha.desc'))
+                (array 'TokenTTL:desc' (t 'common.sort.duration.asc'))
+                (array 'TokenTTL:asc' (t 'common.sort.duration.desc'))
+              )
+            )
             as |selectable|
           }}
             {{get selectable @sort.value}}
           {{/let}}
         </span>
       </BlockSlot>
-        <BlockSlot @name="options">
+      <BlockSlot @name='options'>
         {{#let components.Optgroup components.Option as |Optgroup Option|}}
-        <Optgroup @label={{t "common.ui.name"}}>
-          <Option @value="MethodName:asc" @selected={{eq "MethodName:asc" @sort.value}}>{{t "common.sort.alpha.asc"}}</Option>
-          <Option @value="MethodName:desc" @selected={{eq "MethodName:desc" @sort.value}}>{{t "common.sort.alpha.desc"}}</Option>
+          <Optgroup @label={{t 'common.ui.name'}}>
+            <Option @value='MethodName:asc' @selected={{eq 'MethodName:asc' @sort.value}}>{{t
+                'common.sort.alpha.asc'
+              }}</Option>
+            <Option @value='MethodName:desc' @selected={{eq 'MethodName:desc' @sort.value}}>{{t
+                'common.sort.alpha.desc'
+              }}</Option>
           </Optgroup>
-        <Optgroup @label={{t "common.ui.maxttl"}}>
-          <Option @value="TokenTTL:desc" @selected={{eq "TokenTTL:desc" @sort.value}}>{{t "common.sort.duration.asc"}}</Option>
-          <Option @value="TokenTTL:asc" @selected={{eq "TokenTTL:asc" @sort.value}}>{{t "common.sort.duration.desc"}}</Option>
+          <Optgroup @label={{t 'common.ui.maxttl'}}>
+            <Option @value='TokenTTL:desc' @selected={{eq 'TokenTTL:desc' @sort.value}}>{{t
+                'common.sort.duration.asc'
+              }}</Option>
+            <Option @value='TokenTTL:asc' @selected={{eq 'TokenTTL:asc' @sort.value}}>{{t
+                'common.sort.duration.desc'
+              }}</Option>
           </Optgroup>
         {{/let}}
       </BlockSlot>

ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs

@@ -1,3 +1,8 @@
-<span class="consul-auth-method-type {{@item.Type}}" data-test-type={{@item.Type}}>
+{{#let (icon-mapping @item.Type) as |flightIcon|}}
+  <span class="consul-auth-method-type {{unless flightIcon @item.Type}}" data-test-type={{@item.Type}}>
+    {{#if flightIcon}}
+      <FlightIcon @name={{flightIcon}} class="mr-1.5 w-4 h-4" />
+    {{/if}}
     {{t (concat "common.brand." @item.Type)}}
   </span>
+{{/let}}

ui/packages/consul-ui/app/components/consul/external-source/index.hbs

@@ -5,9 +5,10 @@
           <dt>
             <span
               data-test-external-source={{externalSource}}
-              class="consul-external-source {{externalSource}}"
+              class="consul-external-source"
               ...attributes
             >
+              <FlightIcon @name={{icon-mapping externalSource}} class="mr-1.5 w-4 h-4"  />
               Registered via {{t (concat "common.brand." externalSource)}}
             </span>
           </dt>
@@ -32,9 +33,10 @@
   {{else if externalSource}}
     <span
       data-test-external-source={{externalSource}}
-      class="consul-external-source {{externalSource}}"
+      class="consul-external-source"
       ...attributes
     >
+      <FlightIcon @name={{icon-mapping externalSource}} @color="rgb(var(--black))" class="mr-1.5 h-4 w-4" />
       {{#if @label}}
         {{@label}}
       {{else}}

ui/packages/consul-ui/app/components/consul/external-source/index.scss

@@ -6,29 +6,6 @@
   --icon-size: icon-300;
 }
 
-.consul-external-source.kubernetes::before {
-  @extend %with-logo-kubernetes-color-icon, %as-pseudo;
-}
-.consul-external-source.terraform::before {
-  @extend %with-logo-terraform-color-icon, %as-pseudo;
-}
-.consul-external-source.nomad::before {
-  @extend %with-logo-nomad-color-icon, %as-pseudo;
-}
-.consul-external-source.consul::before,
-.consul-external-source.consul-api-gateway::before {
-  @extend %with-logo-consul-color-icon, %as-pseudo;
-}
-.consul-external-source.vault::before {
-  @extend %with-vault-300;
-}
-.consul-external-source.lambda::before,
-.consul-external-source.aws::before {
-  @extend %with-aws-300;
-}
-.consul-external-source.leader::before {
-  @extend %with-star-outline-mask, %as-pseudo;
-}
 .consul-external-source.jwt::before {
   @extend %with-logo-jwt-color-icon, %as-pseudo;
 }

ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs

@@ -1,47 +1,52 @@
 <TabularCollection
-  class="consul-intention-list-table"
+  class='consul-intention-list-table'
   ...attributes
   @items={{@items}}
   @rowHeight={{59}}
-as |item index|>
-    <BlockSlot @name="header">
-        <th class="source">Source</th>
-        <th class="intent">&nbsp;</th>
-        <th class="destination">Destination</th>
-        <th class="permissions">
+  as |item index|
+>
+  <BlockSlot @name='header'>
+    <th class='source'>Source</th>
+    <th class='intent'>&nbsp;</th>
+    <th class='destination'>Destination</th>
+    <th class='permissions'>
       Permissions
       <span>
-            <Tooltip>Permissions intercept an Intention's traffic using Layer 7 criteria, such as path prefixes and http headers.</Tooltip>
+        <Tooltip>Permissions intercept an Intention's traffic using Layer 7 criteria, such as path
+          prefixes and http headers.</Tooltip>
       </span>
     </th>
-        <th class="meta">&nbsp;</th>
+    <th class='meta'>&nbsp;</th>
   </BlockSlot>
-    <BlockSlot @name="row">
-        <td class="source" data-test-intention={{item.ID}}>
-          <a href={{href-to (or @routeName 'dc.intentions.edit') item.ID}} data-test-intention-source={{item.SourceName}}>
+  <BlockSlot @name='row'>
+    <td class='source' data-test-intention={{item.ID}}>
+      <a
+        href={{href-to (or @routeName 'dc.intentions.edit') item.ID}}
+        data-test-intention-source={{item.SourceName}}
+      >
         {{#if (eq item.SourceName '*')}}
           All Services (*)
         {{else}}
           {{item.SourceName}}
         {{/if}}
         {{! TODO: slugify }}
-            <em class="consul-intention-list-table__meta-info">
+        <em class='consul-intention-list-table__meta-info'>
           <Consul::Bucket::List
             @item={{hash
               Namespace=item.SourceNS
               Partition=item.SourcePartition
               PeerName=item.SourcePeer
             }}
-                @nspace="-"
-                @partition="-"
+            @nspace='-'
+            @partition='-'
           />
         </em>
       </a>
     </td>
-        <td class="intent intent-{{slugify item.Action}}" data-test-intention-action={{item.Action}}>
-          <strong>{{capitalize (or item.Action "App aware")}}</strong>
+    <td class='intent intent-{{slugify item.Action}}' data-test-intention-action={{item.Action}}>
+      <strong>{{capitalize (or item.Action 'App aware')}}</strong>
     </td>
-        <td class="destination" data-test-intention-destination={{item.DestinationName}}>
+    <td class='destination' data-test-intention-destination={{item.DestinationName}}>
       <span>
         {{#if (eq item.DestinationName '*')}}
           All Services (*)
@@ -51,45 +56,58 @@ as |item index|>
         {{#if (or (can 'use nspaces') (can 'use partitions'))}}
           {{! TODO: slugify }}
           <em>
-              <span
-                class={{concat 'partition-' (or item.DestinationPartition 'default')}}
-              >{{or item.DestinationPartition 'default'}}</span> / <span
-                class={{concat 'nspace-' (or item.DestinationNS 'default')}}
-              >{{or item.DestinationNS 'default'}}</span>
+            <span class={{concat 'partition-' (or item.DestinationPartition 'default')}}>{{or
+                item.DestinationPartition
+                'default'
+              }}</span>
+            /
+            <span class={{concat 'nspace-' (or item.DestinationNS 'default')}}>{{or
+                item.DestinationNS
+                'default'
+              }}</span>
           </em>
         {{/if}}
       </span>
     </td>
-        <td class="permissions">
+    <td class='permissions'>
       {{#if (gt item.Permissions.length 0)}}
         <span>{{pluralize item.Permissions.length 'Permission'}}</span>
       {{/if}}
     </td>
-        <td class="meta">
+    <td class='meta'>
       {{#if item.IsManagedByCRD}}
-          <Consul::ExternalSource @item={{item}} @label="Managed by CRD" />
+        <Consul::ExternalSource @item={{item}} @label='Managed by CRD' />
       {{/if}}
     </td>
   </BlockSlot>
-    <BlockSlot @name="actions" as |index change checked|>
+  <BlockSlot @name='actions' as |index change checked|>
     <PopoverMenu
       @expanded={{if (eq checked index) true false}}
-        @onchange={{action change index}} @keyboardAccess={{false}}
+      @onchange={{action change index}}
+      @keyboardAccess={{false}}
     >
-        <BlockSlot @name="trigger">
+      <BlockSlot @name='trigger'>
         More
       </BlockSlot>
-        <BlockSlot @name="menu" as |confirm send keypressClick change|>
-        {{#if (can "write intention" item=item)}}
-            <li role="none">
-              <a role="menuitem" tabindex="-1" href={{href-to (or routeName 'dc.intentions.edit') item.ID}}>Edit</a>
+      <BlockSlot @name='menu' as |confirm send keypressClick change|>
+        {{#if (can 'write intention' item=item)}}
+          <li role='none'>
+            <a
+              role='menuitem'
+              tabindex='-1'
+              href={{href-to (or routeName 'dc.intentions.edit') item.ID}}
+            >Edit</a>
           </li>
-            <li role="none" class="dangerous">
-              <label for={{confirm}} role="menuitem" tabindex="-1" onkeypress={{keypressClick}} data-test-delete>Delete</label>
-              <div role="menu">
-                <InformedAction
-                  class="warning"
-                >
+          <li role='none' class='dangerous'>
+            <label
+              for={{confirm}}
+              role='menuitem'
+              tabindex='-1'
+              onkeypress={{keypressClick}}
+              data-test-delete
+            >Delete</label>
+            <div role='menu'>
+              <InformedAction class='warning'>
                 <:header>
                   Confirm Delete
                 </:header>
@@ -99,19 +117,17 @@ as |item index|>
                   </p>
                 </:body>
                 <:actions as |Actions|>
-                    <Actions.Action class="dangerous">
+                  <Actions.Action class='dangerous'>
                     <Action
-                        class="type-delete"
-                        tabindex="-1"
+                      class='type-delete'
+                      tabindex='-1'
                       {{on 'click' (queue (action change) (action @delete item))}}
                     >
                       Delete
                     </Action>
                   </Actions.Action>
                   <Actions.Action>
-                      <Action
-                        @for={{confirm}}
-                      >
+                    <Action @for={{confirm}}>
                       Cancel
                     </Action>
                   </Actions.Action>
@@ -119,34 +135,34 @@ as |item index|>
               </InformedAction>
             </div>
           </li>
-          {{else if (can "view CRD intention" item=item)}}
-            <li role="none">
-              <div role="menu">
-                <InformedAction
-                  class="info kubernetes"
-                >
+        {{else if (can 'view CRD intention' item=item)}}
+          <li role='none'>
+            <div role='menu'>
+              <InformedAction>
                 <:header>
+                  <span class='flex flex-nowrap items-center'>
+                    <FlightIcon @name='kubernetes-color' class='mr-1.5' />
                     Managed by CRD
+                  </span>
                 </:header>
                 <:body>
                   <p>
-                      This intention is being managed through an Intention Custom Resource in your Kubernetes cluster. It is view only in the UI.
+                    This intention is being managed through an Intention Custom Resource in your
+                    Kubernetes cluster. It is view only in the UI.
                   </p>
                 </:body>
                 <:actions as |Actions|>
                   <Actions.Action>
                     <Action
-                        tabindex="-1"
-                        class="action"
+                      tabindex='-1'
+                      class='action'
                       @href={{href-to (or @routeName 'dc.intentions.edit') item.ID}}
                     >
                       View
                     </Action>
                   </Actions.Action>
                   <Actions.Action>
-                      <Action
-                        @onclick={{action change}}
-                      >
+                    <Action @onclick={{action change}}>
                       Cancel
                     </Action>
                   </Actions.Action>
@@ -155,10 +171,10 @@ as |item index|>
             </div>
           </li>
         {{else}}
-            <li role="none">
+          <li role='none'>
             <a
-                role="menuitem"
-                tabindex="-1"
+              role='menuitem'
+              tabindex='-1'
               href={{href-to (or routeName 'dc.intentions.edit') item.ID}}
             >
               View

ui/packages/consul-ui/app/components/consul/service-instance/search-bar/index.hbs

@@ -1,31 +1,29 @@
-<SearchBar
-  class="consul-service-instance-search-bar"
-  ...attributes
-  @filter={{@filter}}
->
+<SearchBar class='consul-service-instance-search-bar' ...attributes @filter={{@filter}}>
   <:status as |search|>
 
     {{#let
-
-  (t (concat "components.consul.service-instance.search-bar." search.status.key ".name")
+      (t
+        (concat 'components.consul.service-instance.search-bar.' search.status.key '.name')
         default=(array
-        (concat "common.search." search.status.key)
-        (concat "common.consul." search.status.key)
+          (concat 'common.search.' search.status.key) (concat 'common.consul.' search.status.key)
         )
       )
-
-  (t (concat "components.consul.service-instance.search-bar." search.status.key ".options." search.status.value)
+      (t
+        (concat
+          'components.consul.service-instance.search-bar.'
+          search.status.key
+          '.options.'
+          search.status.value
+        )
         default=(array
-        (concat "common.search." search.status.value)
-        (concat "common.consul." search.status.value)
-        (concat "common.brand." search.status.value)
+          (concat 'common.search.' search.status.value)
+          (concat 'common.consul.' search.status.value)
+          (concat 'common.brand.' search.status.value)
         )
       )
-
-as |key value|}}
-      <search.RemoveFilter
-        aria-label={{t "common.ui.remove" item=(concat key " " value)}}
-      >
+      as |key value|
+    }}
+      <search.RemoveFilter aria-label={{t 'common.ui.remove' item=(concat key ' ' value)}}>
         <dl>
           <dt>{{key}}</dt>
           <dd>{{value}}</dd>
@@ -38,26 +36,27 @@ as |key value|}}
     <search.Search
       @onsearch={{action @onsearch}}
       @value={{@search}}
-        @placeholder={{t "common.search.search"}}
+      @placeholder={{t 'common.search.search'}}
     >
       {{#if @filter.searchproperty}}
         <search.Select
-          class="type-search-properties"
-          @position="right"
+          class='type-search-properties'
+          @position='right'
           @onchange={{action @filter.searchproperty.change}}
           @multiple={{true}}
           @required={{true}}
-        as |components|>
-          <BlockSlot @name="selected">
+          as |components|
+        >
+          <BlockSlot @name='selected'>
             <span>
-              {{t "common.search.searchproperty"}}
+              {{t 'common.search.searchproperty'}}
             </span>
           </BlockSlot>
-          <BlockSlot @name="options">
-    {{#let components.Optgroup components.Option as |Optgroup Option|}}
+          <BlockSlot @name='options'>
+            {{#let components.Option as |Option|}}
               {{#each @filter.searchproperty.default as |prop|}}
                 <Option @value={{prop}} @selected={{includes prop @filter.searchproperty.value}}>
-                {{t (concat "common.consul." (lowercase prop))}}
+                  {{t (concat 'common.consul.' (lowercase prop))}}
                 </Option>
               {{/each}}
             {{/let}}
@@ -68,25 +67,26 @@ as |key value|}}
   </:search>
   <:filter as |search|>
     <search.Select
-        class="type-status"
-        @position="left"
+      class='type-status'
+      @position='left'
       @onchange={{action @filter.status.change}}
       @multiple={{true}}
-      as |components|>
-        <BlockSlot @name="selected">
+      as |components|
+    >
+      <BlockSlot @name='selected'>
         <span>
-            {{t "common.consul.status"}}
+          {{t 'common.consul.status'}}
         </span>
       </BlockSlot>
-        <BlockSlot @name="options">
+      <BlockSlot @name='options'>
         {{#let components.Optgroup components.Option as |Optgroup Option|}}
-    {{#each (array "passing" "warning" "critical" "empty") as |state|}}
-          <Option class="value-{{state}}" @value={{state}} @selected={{includes state @filter.status.value}}>
-            {{t (concat "common.consul." state)
-                default=(array
-                  (concat "common.search." state)
-                )
-            }}
+          {{#each (array 'passing' 'warning' 'critical' 'empty') as |state|}}
+            <Option
+              class='value-{{state}}'
+              @value={{state}}
+              @selected={{includes state @filter.status.value}}
+            >
+              {{t (concat 'common.consul.' state) default=(array (concat 'common.search.' state))}}
             </Option>
           {{/each}}
         {{/let}}
@@ -94,60 +94,64 @@ as |key value|}}
     </search.Select>
     {{#if (gt @sources.length 0)}}
       <search.Select
-        class="type-source"
-        @position="left"
+        class='type-source'
+        @position='left'
         @onchange={{action @filter.source.change}}
         @multiple={{true}}
-      as |components|>
-        <BlockSlot @name="selected">
-          <span>
-            {{t "common.search.source"}}
-          </span>
-        </BlockSlot>
-        <BlockSlot @name="options">
-  {{#let components.Optgroup components.Option as |Optgroup Option|}}
-    {{#each @sources as |source|}}
-          <Option class={{source}} @value={{source}} @selected={{includes source @filter.source.value}}>
-            {{t (concat "common.brand." source)}}
-          </Option>
-    {{/each}}
-  {{/let}}
-        </BlockSlot>
+        as |components|
+      >
+        <Consul::SourcesSelect
+          @components={{components}}
+          @filter={{@filter}}
+          @sources={{@sources}}
+        />
       </search.Select>
     {{/if}}
   </:filter>
   <:sort as |search|>
     <search.Select
-        class="type-sort"
+      class='type-sort'
       data-test-sort-control
-        @position="right"
+      @position='right'
       @onchange={{action @sort.change}}
       @multiple={{false}}
       @required={{true}}
-      as |components|>
-        <BlockSlot @name="selected">
+      as |components|
+    >
+      <BlockSlot @name='selected'>
         <span>
-            {{#let (from-entries (array
-                (array "Name:asc" (t "common.sort.alpha.asc"))
-                (array "Name:desc" (t "common.sort.alpha.desc"))
-                (array "Status:asc" (t "common.sort.status.asc"))
-                (array "Status:desc" (t "common.sort.status.desc"))
-                ))
+          {{#let
+            (from-entries
+              (array
+                (array 'Name:asc' (t 'common.sort.alpha.asc'))
+                (array 'Name:desc' (t 'common.sort.alpha.desc'))
+                (array 'Status:asc' (t 'common.sort.status.asc'))
+                (array 'Status:desc' (t 'common.sort.status.desc'))
+              )
+            )
             as |selectable|
           }}
             {{get selectable @sort.value}}
           {{/let}}
         </span>
       </BlockSlot>
-        <BlockSlot @name="options">
+      <BlockSlot @name='options'>
         {{#let components.Optgroup components.Option as |Optgroup Option|}}
-        <Optgroup @label={{t "common.consul.status"}}>
-            <Option @value="Status:asc" @selected={{eq "Status:asc" @sort.value}}>{{t "common.sort.status.asc"}}</Option>
-            <Option @value="Status:desc" @selected={{eq "Status:desc" @sort.value}}>{{t "common.sort.status.desc"}}</Option>
+          <Optgroup @label={{t 'common.consul.status'}}>
+            <Option @value='Status:asc' @selected={{eq 'Status:asc' @sort.value}}>{{t
+                'common.sort.status.asc'
+              }}</Option>
+            <Option @value='Status:desc' @selected={{eq 'Status:desc' @sort.value}}>{{t
+                'common.sort.status.desc'
+              }}</Option>
           </Optgroup>
-        <Optgroup @label={{t "components.consul.service-instance.search-bar.sort.name.name"}}>
-            <Option @value="Name:asc" @selected={{eq "Name:asc" @sort.value}}>{{t "common.sort.alpha.asc"}}</Option>
-            <Option @value="Name:desc" @selected={{eq "Name:desc" @sort.value}}>{{t "common.sort.alpha.desc"}}</Option>
+          <Optgroup @label={{t 'components.consul.service-instance.search-bar.sort.name.name'}}>
+            <Option @value='Name:asc' @selected={{eq 'Name:asc' @sort.value}}>{{t
+                'common.sort.alpha.asc'
+              }}</Option>
+            <Option @value='Name:desc' @selected={{eq 'Name:desc' @sort.value}}>{{t
+                'common.sort.alpha.desc'
+              }}</Option>
           </Optgroup>
         {{/let}}
       </BlockSlot>

ui/packages/consul-ui/app/components/consul/service/search-bar/index.hbs

@@ -126,33 +126,11 @@
         @multiple={{true}}
         as |components|
       >
-        <BlockSlot @name='selected'>
-          <span>
-            {{t 'common.search.source'}}
-          </span>
-        </BlockSlot>
-        <BlockSlot @name='options'>
-          {{#let components.Option as |Option|}}
-            {{#if (gt @sources.length 0)}}
-              <Option
-                class='consul'
-                @value='consul'
-                @selected={{includes 'consul' @filter.source.value}}
-              >
-                {{t 'common.brand.consul'}}
-              </Option>
-              {{#each this.sortedSources as |source|}}
-                <Option
-                  class={{source}}
-                  @value={{source}}
-                  @selected={{includes source @filter.source.value}}
-                >
-                  {{t (concat 'common.brand.' source)}}
-                </Option>
-              {{/each}}
-            {{/if}}
-          {{/let}}
-        </BlockSlot>
+        <Consul::SourcesSelect 
+          @components={{components}}
+          @filter={{@filter}}
+          @sources={{this.sortedSources}}
+        />
       </search.Select>
     {{/if}}
   </:filter>

ui/packages/consul-ui/app/components/consul/service/search-bar/index.js

@@ -11,6 +11,7 @@ export default class ConsulServiceSearchBar extends Component {
 
   get sortedSources() {
     const sources = this.args.sources || [];
+    sources.unshift(['consul']);
 
     if (sources.includes('consul-api-gateway')) {
       return [...sources.filter((s) => s !== 'consul-api-gateway'), 'consul-api-gateway'];

ui/packages/consul-ui/app/components/consul/sources-select/index.hbs

@@ -0,0 +1,25 @@
+{{#if (gt @sources.length 0)}}
+  <BlockSlot @name='selected'>
+    <span>
+      {{t 'common.search.source'}}
+    </span>
+  </BlockSlot>
+  <BlockSlot @name='options'>
+    {{#let @components.Option as |Option|}}
+      {{#each @sources as |source|}}
+        {{#let (icon-mapping source) as |flightIcon|}}
+          <Option
+            class={{unless flightIcon source}}
+            @value={{source}}
+            @selected={{includes source @filter.source.value}}
+          >
+            {{#if flightIcon}}
+              <FlightIcon @name={{flightIcon}} class='mr-2.5' />
+            {{/if}}
+            {{t (concat 'common.brand.' source)}}
+          </Option>
+        {{/let}}
+      {{/each}}
+    {{/let}}
+  </BlockSlot>
+{{/if}}

ui/packages/consul-ui/app/components/custom-element/README.mdx

@@ -1,87 +0,0 @@
-# CustomElement
-
-A renderless component to aid with the creation of HTML custom elements a.k.a
-WebComponents.
-
-All of the CustomElement component arguments are only used at construction
-time (within the components constructor) therefore they are, by design, static.
-You shouldn't be dynamically updating these values at all. They are only for
-type checking and documention purposes and therefore once defined/hardcoded
-they should only change if you as the author wishes to change them.
-
-The component is built from various other components, also see their documentaton
-for further details (`<ShadowHost />`, `<ShadowTemplate />`).
-
-```hbs preview-template
-<CustomElement
-  @element="x-component"
-  @attrs={{array
-    (array 'type' '"awesome" | "sauce"' 'awesome' 'Set the type of the x-component')
-    (array 'x' 'number' 0 'The x-ness of the x-component')
-  }}
-  @cssprops={{array
-    (array '--awesome-x-sauce' 'length' '[x]' 'Makes the x-ness of the sauce available to CSS, automatically synced/tracked from the x attributes')
-    (array '--awesome-color' 'color' undefined 'This CSS property can be used to set the color of the awesome')
-  }}
-  @cssparts={{array
-    (array 'base' 'Style base from The Outside via ::part(base)')
-  }}
-  @slots={{array
-    (array 'header' "You'll want to document the slots also")
-    (array '' 'Including the default slot')
-  }}
-as |custom element|>
-  <x-component
-    {{did-insert custom.connect}}
-    {{will-destroy custom.disconnect}}
-    aria-hidden="true"
-    ...attributes
-  >
-    <custom.Template
-      @styles={{css-map
-      }}
-    >
-      <div part="base"
-        data-x={{element.attrs.x}}
-        data-type={{element.attrs.type}}
-      >
-        <slot name="header"></slot>
-        <slot></slot>
-      </div>
-    </custom.Template>
-  </x-component>
-</CustomElement>
-
-```
-
-## Arguments
-
-All `descriptions` in attributes will be compiled out at build time as well as the `@description` attribute itself.
-
-| Attribute     | Type           | Default | Description                                                                |
-| :------------ | :------------- | :------ | :------------------------------------------------------------------------- |
-| element       | string         |         | The custom tag to be used for the custom element. Must include a dash      |
-| description   | string         |         | Short 1 line description for the element. Think "git commit title" style   |
-| attrs         | attrInfo[]     |         | An array of attributes that can be used on the element                     |
-| slots         | slotsInfo[]    |         | An array of slots that can be used for the element (100% compiled out)     |
-| cssprops      | cssPropsInfo[] |         | An array of CSS properties that are relevant to the component              |
-| cssparts      | cssPartsInfo[] |         | An array of CSS parts that can be used for the element (100% compiled out) |
-| args          | argsInfo[]     |         | An array of Glimmer arguments used for the component (100% compiled out)   |
-
-## Exports
-
-### custom
-
-| Attribute  | Type     | Description                                                                         |
-| :--------- | :------- | :---------------------------------------------------------------------------------- |
-| connect    | function | A did-insert-able callback for tagging an element to be used for the custom element |
-| disconnect | function | A will-destroy-able callback for destroying an element used for the custom element  |
-
-### element
-
-| Attribute  | Type     | Description                                                                      |
-| :--------- | :------- | :------------------------------------------------------------------------------- |
-| attributes | object   | An object containing a reference to all the custom elements' observed properties |
-| *          |          | All other properties proxy through to the CustomElements class                   |
-
-

ui/packages/consul-ui/app/components/custom-element/index.hbs

@@ -1,11 +0,0 @@
-<ShadowHost as |shadow|>
-  {{yield
-    (hash
-      root=(fn this.setHost (fn shadow.host))
-      connect=(fn this.setHost (fn shadow.host))
-      Template=shadow.Template
-      disconnect=(fn this.disconnect)
-    )
-    this.element
-  }}
-</ShadowHost>

ui/packages/consul-ui/app/components/custom-element/index.js

@@ -1,189 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
-import { assert } from '@ember/debug';
-
-const ATTRIBUTE_CHANGE = 'custom-element.attributeChange';
-const elements = new Map();
-const proxies = new WeakMap();
-
-const typeCast = (attributeInfo, value) => {
-  let type = attributeInfo.type;
-  const d = attributeInfo.default;
-  value = value == null ? attributeInfo.default : value;
-  if (type.indexOf('|') !== -1) {
-    assert(
-      `"${value} is not of type '${type}'"`,
-      type
-        .split('|')
-        .map((item) => item.replaceAll('"', '').trim())
-        .includes(value)
-    );
-    type = 'string';
-  }
-  switch (type) {
-    case '<length>':
-    case '<percentage>':
-    case '<dimension>':
-    case 'number': {
-      const num = parseFloat(value);
-      if (isNaN(num)) {
-        return typeof d === 'undefined' ? 0 : d;
-      } else {
-        return num;
-      }
-    }
-    case '<integer>':
-      return parseInt(value);
-    case '<string>':
-    case 'string':
-      return (value || '').toString();
-  }
-};
-
-const attributeChangingElement = (name, Cls = HTMLElement, attributes = {}, cssprops = {}) => {
-  const attrs = Object.keys(attributes);
-
-  const customClass = class extends Cls {
-    static get observedAttributes() {
-      return attrs;
-    }
-
-    attributeChangedCallback(name, oldValue, newValue) {
-      const prev = typeCast(attributes[name], oldValue);
-      const value = typeCast(attributes[name], newValue);
-
-      const cssProp = cssprops[`--${name}`];
-      if (typeof cssProp !== 'undefined' && cssProp.track === `[${name}]`) {
-        this.style.setProperty(`--${name}`, value);
-      }
-
-      if (typeof super.attributeChangedCallback === 'function') {
-        super.attributeChangedCallback(name, prev, value);
-      }
-
-      this.dispatchEvent(
-        new CustomEvent(ATTRIBUTE_CHANGE, {
-          detail: {
-            name: name,
-            previousValue: prev,
-            value: value,
-          },
-        })
-      );
-    }
-  };
-  customElements.define(name, customClass);
-  return () => {};
-};
-
-const infoFromArray = (arr, keys) => {
-  return (arr || []).reduce((prev, info) => {
-    let key;
-    const obj = {};
-    keys.forEach((item, i) => {
-      if (item === '_') {
-        key = i;
-        return;
-      }
-      obj[item] = info[i];
-    });
-    prev[info[key]] = obj;
-    return prev;
-  }, {});
-};
-const debounceRAF = (cb, prev) => {
-  if (typeof prev !== 'undefined') {
-    cancelAnimationFrame(prev);
-  }
-  return requestAnimationFrame(cb);
-};
-const createElementProxy = ($element, component) => {
-  return new Proxy($element, {
-    get: (target, prop, receiver) => {
-      switch (prop) {
-        case 'attrs':
-          return component.attributes;
-        default:
-          if (typeof target[prop] === 'function') {
-            // need to ensure we use a MultiWeakMap here
-            // if(this.methods.has(prop)) {
-            //   return this.methods.get(prop);
-            // }
-            const method = target[prop].bind(target);
-            // this.methods.set(prop, method);
-            return method;
-          }
-      }
-    },
-  });
-};
-
-export default class CustomElementComponent extends Component {
-  @tracked $element;
-  @tracked _attributes = {};
-
-  __attributes;
-  _attchange;
-
-  constructor(owner, args) {
-    super(...arguments);
-    if (!elements.has(args.element)) {
-      const cb = attributeChangingElement(
-        args.element,
-        args.class,
-        infoFromArray(args.attrs, ['_', 'type', 'default', 'description']),
-        infoFromArray(args.cssprops, ['_', 'type', 'track', 'description'])
-      );
-      elements.set(args.element, cb);
-    }
-  }
-
-  get attributes() {
-    return this._attributes;
-  }
-
-  get element() {
-    if (this.$element) {
-      if (proxies.has(this.$element)) {
-        return proxies.get(this.$element);
-      }
-      const proxy = createElementProxy(this.$element, this);
-      proxies.set(this.$element, proxy);
-      return proxy;
-    }
-    return undefined;
-  }
-
-  @action
-  setHost(attachShadow, $element) {
-    attachShadow($element);
-    this.$element = $element;
-    this.$element.addEventListener(ATTRIBUTE_CHANGE, this.attributeChange);
-
-    (this.args.attrs || []).forEach((entry) => {
-      const value = $element.getAttribute(entry[0]);
-      $element.attributeChangedCallback(entry[0], value, value);
-    });
-  }
-
-  @action
-  disconnect() {
-    this.$element.removeEventListener(ATTRIBUTE_CHANGE, this.attributeChange);
-  }
-
-  @action
-  attributeChange(e) {
-    e.stopImmediatePropagation();
-    // currently if one single attribute changes
-    // they all change
-    this.__attributes = {
-      ...this.__attributes,
-      [e.detail.name]: e.detail.value,
-    };
-    this._attchange = debounceRAF(() => {
-      // tell glimmer we changed the attrs
-      this._attributes = this.__attributes;
-    }, this._attchange);
-  }
-}

ui/packages/consul-ui/app/components/disclosure-card/README.mdx

@@ -1,125 +0,0 @@
-<!-- START component-docs:@tagName -->
-# DisclosureCard
-<!-- END component-docs:@tagName -->
-
-```hbs preview-template
-
-<figure>
-
-  <figcaption>
-    Use the component
-  </figcaption>
-
-    <DisclosureCard as |disclosure|>
-
-      <header>
-        <h4>api-service-1</h4>
-      </header>
-      <Consul::Bucket::List
-        @item={{hash
-          Namespace="different-nspace"
-          Partition="different-partition"
-        }}
-        @nspace={{'nspace'}}
-        @partition={{'partition'}}
-      />
-      <DistributionMeter
-        type="linear"
-      as |meter|>
-        <meter.Meter class="warning" percentage="50" />
-        <meter.Meter class="critical" percentage="30" />
-      </DistributionMeter>
-
-      <disclosure.Details
-
-      as |details|>
-        <Consul::Bucket::List
-          @item={{hash
-            Namespace="different-nspace"
-            Partition="different-partition"
-          }}
-          @nspace={{'nspace'}}
-          @partition={{'partition'}}
-        />
-        <DistributionMeter
-          type="linear"
-        as |meter|>
-          <meter.Meter class="warning" percentage="80" />
-          <meter.Meter class="critical" percentage="10" />
-        </DistributionMeter>
-
-        <Consul::Bucket::List
-          @item={{hash
-            Namespace="different-nspace"
-            Partition="different-partition"
-          }}
-          @nspace={{'nspace'}}
-          @partition={{'partition'}}
-        />
-
-        <DistributionMeter
-          type="linear"
-        as |meter|>
-          <meter.Meter class="warning" percentage="10" />
-          <meter.Meter class="critical" percentage="40" />
-        </DistributionMeter>
-
-        <Consul::Bucket::List
-          @item={{hash
-            Namespace="different-nspace"
-            Partition="different-partition"
-          }}
-          @nspace={{'nspace'}}
-          @partition={{'partition'}}
-        />
-
-        <DistributionMeter
-          type="linear"
-        as |meter|>
-          <meter.Meter class="warning" percentage="50" />
-          <meter.Meter class="critical" percentage="30" />
-        </DistributionMeter>
-
-      </disclosure.Details>
-
-      <disclosure.Action
-        slot="action"
-        {{on 'click' disclosure.toggle}}
-      >
-        {{if disclosure.expanded "View less" "View more"}}
-      </disclosure.Action>
-
-    </DisclosureCard>
-
-</figure>
-```
-
-## Attributes
-
-<!-- START component-docs:@attrs -->
-<!-- END component-docs:@attrs -->
-
-## Arguments
-
-<!-- START component-docs:@args -->
-<!-- END component-docs:@args -->
-
-## Slots
-
-<!-- START component-docs:@slots -->
-<!-- END component-docs:@slots -->
-
-## CSS Parts
-
-<!-- START component-docs:@cssparts -->
-<!-- END component-docs:@cssparts -->
-
-## CSS Properties
-
-<!-- START component-docs:@cssprops -->
-<!-- END component-docs:@cssprops -->
-
-## Contextual Components
-
-<!-- START component-docs:@components -->
-<!-- END component-docs:@components -->

ui/packages/consul-ui/app/components/disclosure-card/index.hbs

@@ -1,90 +0,0 @@
-<CustomElement
-  @element="disclosure-card"
-  @description="Block level component with extra disclosable content"
-  @attrs={{array
-  }}
-as |custom element|>
-<Disclosure as |disclosure|>
-  <disclosure-card
-    {{did-insert custom.connect}}
-    {{will-destroy custom.disconnect}}
-    expanded={{disclosure.expanded}}
-  >
-
-      <custom.Template
-        @styles={{css-map
-          (require '/styles/base/icons/base-keyframes.css' from='/components/disclosure-card')
-          (require '/styles/base/icons/icons/chevron-down/index.css' from='/components/disclosure-card')
-          (require '/components/panel/index.css' from='/components/disclosure-card')
-          (css "
-            :host {
-              display: block;
-            }
-            slot[name='action']::slotted(button) {
-              display: block;
-              cursor: pointer;
-              width: 100%;
-
-              background-color: rgb(var(--tone-gray-050));
-              color: rgb(var(--tone-gray-800));
-              padding-top: var(--padding-y);
-              padding-bottom: var(--padding-y);
-            }
-            slot[name='action']::slotted(button)::after {
-              transition-timing-function: linear;
-              transition-duration: 300ms;
-              transition-property: transform;
-              --icon-name: icon-chevron-down;
-              --icon-size: icon-000;
-              content: '';
-            }
-
-            :host([expanded]) slot[name='action']::slotted(button)::after {
-              transform: scaleY(-100%);
-            }
-
-            :host([expanded]) [style*='max-height'] {
-              transition-duration: 50ms;
-            }
-            [style*='max-height'] {
-              transition-timing-function: ease-out;
-              transition-property: max-height;
-              overflow: hidden;
-            }
-            .content {
-              padding: var(--padding-y) var(--padding-x);
-            }
-          ")
-        }}
-      >
-        <div part="base"
-          class={{class-map
-            "panel"
-          }}
-        >
-          <div
-            {{on-resize (dom-position (array
-              (array 'height' 'max-height')
-            ))}}
-            class={{class-map
-              'content'
-            }}
-          >
-            <slot>
-            </slot>
-          </div>
-          <hr
-            class={{class-map
-              'panel-separator'
-            }}
-          />
-          <slot name="action">
-          </slot>
-        </div>
-      </custom.Template>
-
-      {{yield disclosure}}
-
-  </disclosure-card>
-</Disclosure>
-</CustomElement>

ui/packages/consul-ui/app/components/distribution-meter/README.mdx

@@ -1,83 +0,0 @@
----
-type: custom-element
----
-<!-- START component-docs:@tagName -->
-# DistributionMeter
-<!-- END component-docs:@tagName -->
-
-<!-- START component-docs:@description -->
-A meter-like component to show a distribution of values.
-<!-- END component-docs:@description -->
-
-```hbs preview-template
-<figure>
-  <figcaption>
-    Provide a widget so we can try switching between all types of meter
-  </figcaption>
-  <select
-    onchange={{action (mut this.type) value="target.value"}}
-  >
-    <option>linear</option>
-    <option>radial</option>
-    <option>circular</option>
-  </select>
-</figure>
-<figure>
-
-  <DataSource
-    @src={{uri '/partition/namespace/dc-1/services'}}
-  as |source|>
-    {{#let
-      (group-by "MeshStatus" (or source.data (array)))
-    as |grouped|}}
-      <DistributionMeter type={{or this.type 'linear'}} as |meter|>
-      {{#each (array 'passing' 'warning' 'critical') as |status|}}
-      {{#let
-        (concat (percentage-of (get grouped (concat status '.length')) source.data.length) '%')
-      as |percentage|}}
-        <meter.Meter
-          description={{capitalize status}}
-          percentage={{percentage}}
-          class={{class-map
-            status
-          }}
-        as |meter|></meter.Meter>
-      {{/let}}
-      {{/each}}
-      </DistributionMeter>
-    {{/let}}
-  </DataSource>
-</figure>
-```
-
-## Attributes
-
-<!-- START component-docs:@attrs -->
-| Attribute | Type                               | Default | Description                           |
-| :-------- | :--------------------------------- | :------ | :------------------------------------ |
-| type      | "linear" \| "radial" \| "circular" | linear  | The type of distribution meter to use |
-
-<!-- END component-docs:@attrs -->
-
-## Contextual Components
-
-<!-- START component-docs:@components -->
-
-### DistributionMeter::Meter
-
-#### Attributes
-
-| Attribute   | Type   | Default | Description                                |
-| :---------- | :----- | :------ | :----------------------------------------- |
-| percentage  | number | 0       | The percentage to be used for the meter    |
-| description | string |         | Textual value to describe the meters value |
-
-
-#### CSS Properties
-
-| Property                | Type       | Tracks       | Description                                                       |
-| :---------------------- | :--------- | :----------- | :---------------------------------------------------------------- |
-| --percentage            | percentage | [percentage] | Read-only alias of the percentage attribute                       |
-| --aggregated-percentage | percentage |              | Aggregated percentage of all meters within the distribution meter |
-
-<!-- END component-docs:@components -->

ui/packages/consul-ui/app/components/distribution-meter/index.css.js

@@ -1,32 +0,0 @@
-export default (css) => {
-  return css`
-    :host {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-    dl {
-      position: relative;
-      height: 100%;
-    }
-    :host([type='linear']) {
-      height: 3px;
-    }
-    :host([type='radial']),
-    :host([type='circular']) {
-      height: 300px;
-    }
-    :host([type='linear']) dl {
-      background-color: currentColor;
-      color: rgb(var(--tone-gray-100));
-      border-radius: var(--decor-radius-999);
-      transition-property: transform;
-      transition-timing-function: ease-out;
-      transition-duration: 0.1s;
-    }
-    :host([type='linear']) dl:hover {
-      transform: scaleY(3);
-      box-shadow: var(--decor-elevation-200);
-    }
-  `;
-};

ui/packages/consul-ui/app/components/distribution-meter/index.hbs

@@ -1,30 +0,0 @@
-<CustomElement
-  @element="distribution-meter"
-  @description="A meter-like component to show a distribution of values."
-  @attrs={{array
-    (array 'type' '"linear" | "radial" | "circular"' 'linear'
-      'The type of distribution meter to use'
-    )
-  }}
-as |custom element|>
-  <distribution-meter
-    {{did-insert custom.connect}}
-    {{will-destroy custom.disconnect}}
-    ...attributes
-  >
-    <custom.Template
-      @styles={{css-map
-        (require './index.css' from='/components/distribution-meter')
-      }}
-    >
-      <dl>
-        <slot></slot>
-      </dl>
-    </custom.Template>
-    {{yield (hash
-      Meter=(component 'distribution-meter/meter'
-        type=element.attrs.type
-      )
-    )}}
-  </distribution-meter>
-</CustomElement>

ui/packages/consul-ui/app/components/distribution-meter/meter/element.js

@@ -1,29 +0,0 @@
-const parseFloatWithDefault = (val, d = 0) => {
-  const num = parseFloat(val);
-  return isNaN(num) ? d : num;
-};
-
-export default (Component) => {
-  return class extends Component {
-    attributeChangedCallback(name, prev, value) {
-      const target = this;
-      switch (name) {
-        case 'percentage': {
-          let prevSibling = target;
-          while (prevSibling) {
-            const nextSibling = prevSibling.nextElementSibling;
-            const aggregatedPercentage = nextSibling
-              ? parseFloatWithDefault(nextSibling.style.getPropertyValue('--aggregated-percentage'))
-              : 0;
-            const perc =
-              parseFloatWithDefault(prevSibling.getAttribute('percentage')) + aggregatedPercentage;
-            prevSibling.style.setProperty('--aggregated-percentage', perc);
-            prevSibling.setAttribute('aggregated-percentage', perc);
-            prevSibling = prevSibling.previousElementSibling;
-          }
-          break;
-        }
-      }
-    }
-  };
-};

ui/packages/consul-ui/app/components/distribution-meter/meter/index.css.js

@@ -1,80 +0,0 @@
-export default (css) => {
-  return css`
-    /*@import '~/styles/base/decoration/visually-hidden.css';*/
-
-    :host(.critical) {
-      color: rgb(var(--tone-red-500));
-    }
-    :host(.warning) {
-      color: rgb(var(--tone-orange-500));
-    }
-    :host(.passing) {
-      color: rgb(var(--tone-green-500));
-    }
-
-    :host {
-      position: absolute;
-      top: 0;
-      height: 100%;
-
-      transition-timing-function: ease-out;
-      transition-duration: 0.5s;
-    }
-    dt,
-    dd meter {
-      animation-name: visually-hidden;
-      animation-fill-mode: forwards;
-      animation-play-state: paused;
-    }
-
-    :host(.type-linear) {
-      transition-property: width;
-      width: calc(var(--aggregated-percentage) * 1%);
-      height: 100%;
-      background-color: currentColor;
-      border-radius: var(--decor-radius-999);
-    }
-
-    :host svg {
-      height: 100%;
-    }
-    :host(.type-radial),
-    :host(.type-circular) {
-      transition-property: none;
-    }
-    :host(.type-radial) dd,
-    :host(.type-circular) dd {
-      width: 100%;
-      height: 100%;
-    }
-    :host(.type-radial) circle,
-    :host(.type-circular) circle {
-      transition-timing-function: ease-out;
-      transition-duration: 0.5s;
-      pointer-events: stroke;
-      transition-property: stroke-dashoffset, stroke-width;
-      transform: rotate(-90deg);
-      transform-origin: 50%;
-      fill: transparent;
-      stroke: currentColor;
-      stroke-dasharray: 100, 100;
-      stroke-dashoffset: calc(calc(100 - var(--aggregated-percentage)) * 1px);
-    }
-    :host([aggregated-percentage='100']) circle {
-      stroke-dasharray: 0 !important;
-    }
-    :host([aggregated-percentage='0']) circle {
-      stroke-dasharray: 0, 100 !important;
-    }
-    :host(.type-radial) circle,
-    :host(.type-circular]) svg {
-      pointer-events: none;
-    }
-    :host(.type-radial) circle {
-      stroke-width: 32;
-    }
-    :host(.type-circular) circle {
-      stroke-width: 14;
-    }
-  `;
-};

ui/packages/consul-ui/app/components/distribution-meter/meter/index.hbs

@@ -1,64 +0,0 @@
-<CustomElement
-  @element="distribution-meter-meter"
-  @class={{require './element'
-    from='/components/distribution-meter/meter'}}
-
-  @attrs={{array
-    (array 'percentage' 'number' 0
-      'The percentage to be used for the meter'
-    )
-    (array 'description' 'string' ''
-      'Textual value to describe the meters value'
-    )
-  }}
-
-  @cssprops={{array
-    (array '--percentage' 'percentage' '[percentage]'
-      'Read-only alias of the percentage attribute'
-    )
-    (array '--aggregated-percentage' 'percentage' undefined
-      'Aggregated percentage of all meters within the distribution meter'
-    )
-  }}
-as |custom element|>
-
-  <distribution-meter-meter
-    {{did-insert custom.connect}}
-    {{will-destroy custom.disconnect}}
-    class={{class-map
-      (array (concat 'type-' @type) @type)
-    }}
-    ...attributes
-  >
-    <custom.Template
-      @styles={{css-map
-        (require '/styles/base/decoration/visually-hidden.css'
-          from='/components/distribution-meter/meter')
-        (require './index.css'
-          from='/components/distribution-meter/meter')
-      }}
-    >
-      <dt>{{element.attrs.description}}</dt>
-      <dd aria-label={{concat element.attrs.percentage '%'}}>
-        <meter min="0" max="100" value={{element.attrs.percentage}}>
-          <slot>{{concat element.attrs.percentage '%'}}</slot>
-        </meter>
-        {{#if (or (eq @type 'circular') (eq @type 'radial'))}}
-          <svg
-            aria-hidden="true"
-            viewBox="0 0 32 32"
-            clip-path="circle()"
-          >
-            <circle
-              r="16"
-              cx="16"
-              cy="16"
-            />
-          </svg>
-        {{/if}}
-      </dd>
-    </custom.Template>
-  </distribution-meter-meter>
-
-</CustomElement>
-

ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs

@@ -1,24 +1,19 @@
-<App
-  class="hashicorp-consul"
-  ...attributes
->
+<App class='hashicorp-consul' ...attributes>
 
   <:notifications as |app|>
     {{#each flashMessages.queue as |flash|}}
-  <app.Notification
-    @delay={{sub flash.timeout flash.extendedTimeout}}
-    @sticky={{flash.sticky}}
-  >
+      <app.Notification @delay={{sub flash.timeout flash.extendedTimeout}} @sticky={{flash.sticky}}>
         {{#if flash.dom}}
           {{{flash.dom}}}
         {{else}}
           {{#let (lowercase flash.type) (lowercase flash.action) as |status type|}}
             <Notice
-    role="alert"
+              role='alert'
               class={{concat status ' notification-' type}}
               data-notification
               @type={{status}}
-  as |notice|>
+              as |notice|
+            >
               <notice.Header>
                 <strong>
                   {{capitalize status}}!
@@ -80,9 +75,9 @@
   </:notifications>
 
   <:home-nav>
-    <a
-      href={{href-to 'index' params=(hash peer=undefined)}}
-    ><Consul::Logo /></a>
+    <a class='w-8 h-8' href={{href-to 'index' params=(hash peer=undefined)}}>
+      <FlightIcon @size='24' @name='consul-color' @stretched={{true}} />
+    </a>
   </:home-nav>
 
   <:main-nav>
@@ -99,73 +94,59 @@
         @partition={{@partition}}
         @nspace={{@nspace}}
         @partitions={{this.partitions}}
-        @onchange={{action (mut this.partitions) value="data"}}
+        @onchange={{action (mut this.partitions) value='data'}}
       />
       <Consul::Nspace::Selector
         @dc={{@dc}}
         @partition={{@partition}}
         @nspace={{@nspace}}
         @nspaces={{this.nspaces}}
-        @onchange={{action (mut this.nspaces) value="data"}}
+        @onchange={{action (mut this.nspaces) value='data'}}
       />
       {{#if (can 'access overview')}}
         <li
           data-test-main-nav-overview
-          class={{class-map
-            (array 'is-active' (is-href 'dc.show' @dc.Name))
-          }}
-        >
-          <Action
-            @href={{href-to 'dc.show' @dc.Name params=(hash peer=undefined)}}
+          class={{class-map (array 'is-active' (is-href 'dc.show' @dc.Name))}}
         >
+          <Action @href={{href-to 'dc.show' @dc.Name params=(hash peer=undefined)}}>
             Overview
           </Action>
         </li>
       {{/if}}
-{{#if (can "read services")}}
+      {{#if (can 'read services')}}
         <li data-test-main-nav-services class={{if (is-href 'dc.services' @dc.Name) 'is-active'}}>
           <a href={{href-to 'dc.services' @dc.Name params=(hash peer=undefined)}}>Services</a>
         </li>
       {{/if}}
-{{#if (can "read nodes")}}
+      {{#if (can 'read nodes')}}
         <li data-test-main-nav-nodes class={{if (is-href 'dc.nodes' @dc.Name) 'is-active'}}>
           <a href={{href-to 'dc.nodes' @dc.Name params=(hash peer=undefined)}}>Nodes</a>
         </li>
       {{/if}}
-{{#if (can "read kv")}}
+      {{#if (can 'read kv')}}
         <li data-test-main-nav-kvs class={{if (is-href 'dc.kv' @dc.Name) 'is-active'}}>
           <a href={{href-to 'dc.kv' @dc.Name params=(hash peer=undefined)}}>Key/Value</a>
         </li>
       {{/if}}
-{{#if (can "read intentions")}}
-        <li data-test-main-nav-intentions class={{if (is-href 'dc.intentions' @dc.Name) 'is-active'}}>
+      {{#if (can 'read intentions')}}
+        <li
+          data-test-main-nav-intentions
+          class={{if (is-href 'dc.intentions' @dc.Name) 'is-active'}}
+        >
           <a href={{href-to 'dc.intentions' @dc.Name params=(hash peer=undefined)}}>Intentions</a>
         </li>
       {{/if}}
-        <Consul::Acl::Selector
-          @dc={{@dc}}
-          @partition={{@partition}}
-          @nspace={{@nspace}}
-        />
-        <Consul::Peer::Selector
-          @dc={{@dc}}
-          @partition={{@partition}}
-          @nspace={{@nspace}}
-        />
+      <Consul::Acl::Selector @dc={{@dc}} @partition={{@partition}} @nspace={{@nspace}} />
+      <Consul::Peer::Selector @dc={{@dc}} @partition={{@partition}} @nspace={{@nspace}} />
     </ul>
   </:main-nav>
 
   <:complementary-nav>
     <ul>
       <Debug::Navigation />
-        <li
-          data-test-main-nav-help
-        >
-          <DisclosureMenu
-          as |disclosure|>
-            <disclosure.Action
-              {{on 'click' disclosure.toggle}}
-            >
+      <li data-test-main-nav-help>
+        <DisclosureMenu as |disclosure|>
+          <disclosure.Action {{on 'click' disclosure.toggle}}>
             Help
           </disclosure.Action>
           <disclosure.Menu as |panel|>
@@ -173,19 +154,12 @@
               <menu.Separator>
                 Consul v{{env 'CONSUL_VERSION'}}
               </menu.Separator>
-                <menu.Item
-                  class="docs-link"
-                >
-                  <menu.Action
-                    @href={{env 'CONSUL_DOCS_URL'}}
-                    @external={{true}}
-                  >
+              <menu.Item class='docs-link'>
+                <menu.Action @href={{env 'CONSUL_DOCS_URL'}} @external={{true}}>
                   Documentation
                 </menu.Action>
               </menu.Item>
-                <menu.Item
-                  class="learn-link"
-                >
+              <menu.Item class='learn-link'>
                 <menu.Action
                   @href={{concat (env 'CONSUL_DOCS_LEARN_URL') '/consul'}}
                   @external={{true}}
@@ -194,13 +168,8 @@
                 </menu.Action>
               </menu.Item>
               <menu.Separator />
-                <menu.Item
-                  class="feedback-link"
-                >
-                  <menu.Action
-                    @href={{env 'CONSUL_REPO_ISSUES_URL'}}
-                    @external={{true}}
-                  >
+              <menu.Item class='feedback-link'>
+                <menu.Action @href={{env 'CONSUL_REPO_ISSUES_URL'}} @external={{true}}>
                   Provide Feedback
                 </menu.Action>
               </menu.Item>
@@ -208,16 +177,8 @@
           </disclosure.Menu>
         </DisclosureMenu>
       </li>
-        <li
-          data-test-main-nav-settings
-          class={{if (is-href 'settings') 'is-active'}}
-        >
-            <a
-              href={{href-to 'settings' params=(hash
-                nspace=undefined
-                partition=undefined
-              )}}
-            >
+      <li data-test-main-nav-settings class={{if (is-href 'settings') 'is-active'}}>
+        <a href={{href-to 'settings' params=(hash nspace=undefined partition=undefined)}}>
           Settings
         </a>
       </li>
@@ -226,20 +187,17 @@
         @partition={{@partition}}
         @nspace={{@nspace}}
         @onchange={{@onchange}}
-        as |selector|>
-          <Ref
-            @target={{this}}
-            @name="tokenSelector"
-            @value={{selector}}
-          />
+        as |selector|
+      >
+        <Ref @target={{this}} @name='tokenSelector' @value={{selector}} />
       </Consul::Token::Selector>
     </ul>
   </:complementary-nav>
 
   <:main>
-    {{yield (hash
-      login=(if this.tokenSelector this.tokenSelector (hash open=undefined close=undefined))
-    )}}
+    {{yield
+      (hash login=(if this.tokenSelector this.tokenSelector (hash open=undefined close=undefined)))
+    }}
   </:main>
 
   <:content-info>

ui/packages/consul-ui/app/components/informed-action/skin.scss

@@ -66,12 +66,6 @@
       background-color: rgb(var(--tone-yellow-050));
     }
   }
-  /* brands */
-  &.kubernetes {
-    header::before {
-      @extend %with-logo-kubernetes-color-icon, %without-mask, %as-pseudo;
-    }
-  }
   /**/
   > ul > .action > * {
     color: rgb(var(--tone-blue-500));

ui/packages/consul-ui/app/components/pill/index.scss

@@ -30,10 +30,3 @@ span.policy-service-identity::before {
 %pill.oidc::before {
   @extend %with-logo-oidc-color-icon, %as-pseudo;
 }
-%pill.kubernetes::before {
-  @extend %with-logo-kubernetes-color-icon, %as-pseudo;
-}
-%pill.aws-iam::before {
-  --icon-name: icon-aws-color;
-  content: '';
-}

ui/packages/consul-ui/app/components/popover-select/index.scss

@@ -56,30 +56,10 @@
   @extend %with-user-team-mask, %as-pseudo;
   color: rgb(var(--tone-gray-500));
 }
-%popover-select .lambda button::before,
-%popover-select .aws button::before {
-  @extend %with-aws-300;
-}
-%popover-select .kubernetes button::before {
-  @extend %with-logo-kubernetes-color-icon, %as-pseudo;
-}
 %popover-select .jwt button::before {
   @extend %with-logo-jwt-color-icon, %as-pseudo;
 }
 %popover-select .oidc button::before {
   @extend %with-logo-oidc-color-icon, %as-pseudo;
 }
-%popover-select .consul button::before,
-%popover-select .consul-api-gateway button::before {
-  @extend %with-logo-consul-color-icon, %as-pseudo;
-}
-%popover-select .nomad button::before {
-  @extend %with-logo-nomad-color-icon, %as-pseudo;
-}
-%popover-select .vault button::before {
-  @extend %with-vault-300;
-}
-%popover-select .terraform button::before {
-  @extend %with-logo-terraform-color-icon, %as-pseudo;
-}
 /**/

ui/packages/consul-ui/app/components/shadow-host/README.mdx

@@ -1,29 +0,0 @@
-# ShadowHost
-
-`ShadowHost` is a small renderless mainly utility component for easily attaching
-ShadowDOM to any applicable DOM node. It mainly exists to provide a context for
-passing around a reference to the element to be used for the shadow template,
-but named appropriately for recognition.
-
-If you are looking to write a custom element, please use the `CustomElement`
-component. If you are simply attaching ShadowDOM to a native HTML element then
-this is the component for you.
-
-```hbs preview-template
-<ShadowHost as |shadow|>
-  <div
-    {{did-insert shadow.host}}
-  >
-    <shadow.Template>
-      <p>hi</p>
-    </shadow.Template>
-  </div>
-</ShadowHost>
-```
-
-## Exports
-
-| Attribute | Type                    | Description                                                                      |
-| :-------- | :---------------------- | :------------------------------------------------------------------------------- |
-| host      | function                | A did-insert-able callback for tagging an element to be used for the shadow root |
-| Template  | ShadowTemplateComponent | ShadowTemplate component pre-configured with the shadow host                     |

ui/packages/consul-ui/app/components/shadow-host/index.hbs

@@ -1,5 +0,0 @@
-{{yield (hash
-  host=(fn this.attachShadow)
-  root=this.shadowRoot
-  Template=(component 'shadow-template' shadowRoot=this.shadowRoot)
-)}}

ui/packages/consul-ui/app/components/shadow-host/index.js

@@ -1,12 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
-
-export default class ShadowHostComponent extends Component {
-  @tracked shadowRoot;
-
-  @action
-  attachShadow($element) {
-    this.shadowRoot = $element.attachShadow({ mode: 'open' });
-  }
-}

ui/packages/consul-ui/app/components/shadow-template/README.mdx

@@ -1,162 +0,0 @@
-# ShadowTemplate
-
-A component to aid creating ShadowDOM based components (when required), heavily
-inspired by the upcoming Declarative Shadow DOM spec, a new way to implement and
-use Shadow DOM directly in HTML.
-
-Instead of passing `shadowroot="open|closed"` as you would with Declarative
-Shadow DOM we have a `@shadowRoot` argument to which you would pass the actual
-Shadow DOM element (which itself either open or closed). You can get a reference
-to this by using the `{{attach-shadow}}` modifier.
-
-Additionally a `@styles` argument is made available for you to optionally
-pass completely isolated, scoped, constructable stylesheets to be used for the
-Shadow DOM tree (you can also continue to use `<style>` within the template
-itself also if necessary).
-
-For the moment we'd generally use a standard div element and add Shadow DOM to
-it, but as shown in the second example, you could also use it to make
-Glimmerized native custom-elements using Declarative ShadowDOM and
-Constructable Stylesheets.
-
-**Important:** As ShadowDOM elements are completely isolated please take care
-to use the features available (slots/parts etc) to make sure components built in
-this way can make use of a11y functionality, i.e. any elements having necessary
-`id` relationships for a11y reasons should be slotted to ensure that the all
-`id`s remain in the LightDOM. Native form controls such as inputs etc should
-also be slotted in order to keep them in the LightDOM to ensure that native
-form functionality continues to work.
-
-Beside several advantages of isolated DOM/CSS ShadowDOM slots can also be used
-within conditionals, something which is currently not possible with
-Glimmer/Ember slots. Mixing Glimmer/Handlebars conditionals with native
-ShadowDOM slots will give you this additional feature (see truthy conditional in
-the example below).
-
-```hbs preview-template
-<div
-  class={{class-map
-    "component-name"
-  }}
-  ...attributes
-  {{attach-shadow (set this 'shadow')}}
->
-  <ShadowTemplate
-    @shadowRoot={{this.shadow}}
-    @styles={{css '
-      :host {
-        background-color: rgb(var(--tone-strawberry-500) / 20%);
-        padding: 1rem; /* 16px */
-      }
-      header {
-        color: purple;
-      }
-      p {
-        color: green;
-      }
-
-      ::slotted(header) {
-        color: blue;
-      }
-      ::slotted(p) {
-        color: red;
-      }
-      header {
-        display: flex;
-        align-items: center;
-      }
-      header::before {
-        margin-right: 0.375rem; /* 6px */
-      }
-    '}}
-  >
-    <header part="header">
-      <slot name="header">
-        <h1>Default Header</h1>
-      </slot>
-    </header>
-    <!-- Wrap the slot in a conditional -->
-    {{#if true}}
-      <slot name="body">
-        <p>Default Body</p>
-      </slot>
-    {{/if}}
-    <slot>
-      <!-- The default slot -->
-    </slot>
-  </ShadowTemplate>
-</div>
-```
-
-```css
-.component-name::part(header)::before {
-  @extend %with-logo-consul-color-icon, %as-pseudo;
-  width: 2rem; /* 32px */
-  height: 2rem; /* 32px */
-}
-```
-
-Example with a custom element. **Please note:** These must still be instantiated
-using Glimmer syntax i.e. `<ComponentName />` not `<component-name />` but a
-`<component-name />` element will be rendered to the DOM instead of a `<div>`.
-
-```hbs preview-template
-<component-name
-  ...attributes
-  {{attach-shadow (set this 'shadow')}}
->
-  <ShadowTemplate
-    @shadowRoot={{this.shadow}}
-    @styles={{css '
-      header {
-        color: purple;
-      }
-      p {
-        color: green;
-      }
-
-      ::slotted(header) {
-        color: blue;
-      }
-      ::slotted(p) {
-        color: red;
-      }
-      header {
-        display: flex;
-        align-items: center;
-      }
-      header::before {
-        margin-right: 0.375rem; /* 6px */
-      }
-    '}}
-  >
-    <header part="header">
-      <slot name="header">
-        <h1>Default Header</h1>
-      </slot>
-    </header>
-    {{#if true}}
-      <slot name="body">
-        <p>Default Body</p>
-      </slot>
-    {{/if}}
-    <slot>
-      <!-- The default slot -->
-    </slot>
-  </ShadowTemplate>
-</component-name>
-```
-
-```css
-component-name::part(header)::before {
-  @extend %with-logo-consul-color-icon, %as-pseudo;
-  width: 2rem; /* 32px */
-  height: 2rem; /* 32px */
-}
-```
-## Arguments
-
-| Argument | Type | Default | Description |
-| --- | --- | --- | --- |
-| `shadowRoot` | `ShadowRoot` |  | A reference to a shadow root (probably retrived using the `{{attach-shadow}}` modifier |
-| `styles` | `CSSResultGroup` | | Styles to be adopted by the ShadowRoot |

ui/packages/consul-ui/app/components/shadow-template/debug.scss

@@ -1,6 +0,0 @@
-[id^='docfy-demo-preview-shadow-template'] .component-name::part(header)::before,
-[id^='docfy-demo-preview-shadow-template'] component-name::part(header)::before {
-  @extend %with-logo-consul-color-icon, %as-pseudo;
-  width: 2rem; /* 32px */
-  height: 2rem; /* 32px */
-}

ui/packages/consul-ui/app/components/shadow-template/index.hbs

@@ -1,11 +0,0 @@
-{{#if @shadowRoot}}
-  {{#in-element @shadowRoot}}
-    {{#if @styles}}
-      {{adopt-styles
-        @shadowRoot
-        @styles
-      }}
-    {{/if}}
-  {{yield}}
-  {{/in-element}}
-{{/if}}

ui/packages/consul-ui/app/helpers/icon-mapping.js

@@ -0,0 +1,28 @@
+import { helper } from '@ember/component/helper';
+
+const ICON_MAPPING = {
+  kubernetes: 'kubernetes-color',
+  terraform: 'terraform-color',
+  nomad: 'nomad-color',
+  consul: 'consul-color',
+  'consul-api-gateway': 'consul-color',
+  vault: 'vault',
+  aws: 'aws-color',
+  'aws-iam': 'aws-color',
+  lambda: 'aws-lambda-color',
+};
+
+/**
+ * Takes a icon name, usually an external-source/auth-method-type, and maps it to a flight-icon name or returns undefined
+ * if the icon is not currently mapped to a flight-icon name. This is particularly useful when dealing with converting icons to
+ * use the `<FlightIcon>` component directly instead of our own css. If the icon is not available with `<FlightIcon>` you can leave
+ * it out of the mapping and handle it in the undefined case.
+ *
+ * @param {string} icon
+ * @returns {string|undefined}
+ */
+function iconMapping([icon]) {
+  return ICON_MAPPING[icon];
+}
+
+export default helper(iconMapping);

ui/packages/consul-ui/app/helpers/icons-debug.js

@@ -75,10 +75,6 @@ export default helper(function ([lib], hash) {
     'auto-apply-24.svg',
     'award-16.svg',
     'award-24.svg',
-    'aws-16.svg',
-    'aws-24.svg',
-    'aws-color-16.svg',
-    'aws-color-24.svg',
     'azure-16.svg',
     'azure-24.svg',
     'azure-color-16.svg',
@@ -549,15 +545,12 @@ export default helper(function ([lib], hash) {
     'logo-alicloud-color.svg',
     'logo-alicloud-monochrome.svg',
     'logo-auth0-color.svg',
-    'logo-aws-color.svg',
-    'logo-aws-monochrome.svg',
     'logo-azure-color.svg',
     'logo-azure-dev-ops-color.svg',
     'logo-azure-dev-ops-monochrome.svg',
     'logo-azure-monochrome.svg',
     'logo-bitbucket-color.svg',
     'logo-bitbucket-monochrome.svg',
-    'logo-consul-color.svg',
     'logo-ember-circle-color.svg',
     'logo-gcp-color.svg',
     'logo-gcp-monochrome.svg',
@@ -573,15 +566,12 @@ export default helper(function ([lib], hash) {
     'logo-kubernetes-color.svg',
     'logo-kubernetes-monochrome.svg',
     'logo-microsoft-color.svg',
-    'logo-nomad-color.svg',
     'logo-oidc-color.svg',
     'logo-okta-color.svg',
     'logo-oracle-color.svg',
     'logo-oracle-monochrome.svg',
     'logo-slack-color.svg',
     'logo-slack-monochrome.svg',
-    'logo-terraform-color.svg',
-    'logo-vault-color.svg',
     'logo-vmware-color.svg',
     'logo-vmware-monochrome.svg',
     'mail-16.svg',

ui/packages/consul-ui/app/modifiers/attach-shadow.js

@@ -1,23 +0,0 @@
-import { setModifierManager, capabilities } from '@ember/modifier';
-
-export default setModifierManager(
-  () => ({
-    capabilities: capabilities('3.13', { disableAutoTracking: true }),
-
-    createModifier() {},
-
-    installModifier(_state, element, { positional: [fn, ...args], named }) {
-      let shadow;
-      try {
-        shadow = element.attachShadow({ mode: 'open' });
-      } catch (e) {
-        // shadow = false;
-        console.error(e);
-      }
-      fn(shadow);
-    },
-    updateModifier() {},
-    destroyModifier() {},
-  }),
-  class CustomElementModifier {}
-);

ui/packages/consul-ui/app/modifiers/attach-shadow.mdx

@@ -1,28 +0,0 @@
-# attach-shadow
-
-`{{attach-shadow (set this 'shadow')}}` attaches a `ShadowRoot` to the modified DOM element
-and pass a reference to that `ShadowRoot` to the setter function.
-
-
-Please note: This should be used as a utility modifier for when having access
-to the shadow DOM is handy, not really for building full blown shadow DOM
-based Web Components.
-
-```hbs preview-template
-<div
-  {{attach-shadow (set this 'shadow')}}
->
-  {{#if this.shadow}}
-    {{#in-element this.shadow}}
-      <slot name="name"></slot>
-    {{/in-element}}
-  {{/if}}
-  <p slot="name">Hello from the shadows!</p>
-</div>
-```
-
-## Positional Arguments
-
-| Argument | Type | Default | Description |
-| --- | --- | --- | --- |
-| `setter` | `function` |  | Usually `set` or `mut` or similar |

ui/packages/consul-ui/app/styles/base/icons/README.mdx

@@ -1,5 +1,12 @@
 # Iconography
 
+_We recently started adopting the [@hashicorp/ember-flight-icons](https://flight-hashicorp.vercel.app/) package, in particular the
+usage of the `<FlightIcon>` component to render icons. This enables us to use all the
+icons listed [on the flight icons page](https://flight-hashicorp.vercel.app/). If an icon is not present in the flight-icons package,
+you may resort to the techniques listed below._
+
+---
+
 All our iconography uses native CSS properties for adding iconography from The
 Outside. You can also add icons using the same properties within `style=""`
 attributes, but you should think twice before adding decorative content into
@@ -29,14 +36,14 @@ selectors.
 
 ```css
 .selector::before {
-  --icon-name: icon-aws-color;
+  --icon-name: icon-alert-circle;
   content: '';
 }
 ```
 
 ```css
 .selector::after {
-  --icon-name: icon-aws;
+  --icon-name: icon-alert-circle;
   --icon-color: rgb(var(---white));
   content: '';
 }
@@ -48,7 +55,7 @@ icons in HTML using these CSS properties.
 ```hbs preview-template
 <h2
   style={{style-map
-    (array '--icon-name-start' 'icon-consul')
+    (array '--icon-name-start' 'icon-alert-circle')
     (array '--icon-color-start' 'rgb(var(--tone-strawberry-500))')
     (array '--icon-name-end' 'icon-vault')
     (array '--icon-color-end' 'var(--color-vault-500)')
@@ -64,9 +71,7 @@ following. Under different circumstances this would give us an option that works
 
 ```hbs
 <span
-  class={{class-map
-    'visually-hidden'
-  }}
+  class={{class-map 'visually-hidden'}}
   style={{style-map
     (array '--icon-name-start' @name)
     (array '--icon-color' @color)
@@ -75,11 +80,9 @@ following. Under different circumstances this would give us an option that works
   ...attributes
 >{{yield}}</span>
 
-
-<Icon @name="icon-name" @color="#FF0000" @size="icon-300" />
+<Icon @name='icon-name' @color='#FF0000' @size='icon-300' />
 ```
 
-
 ## Deprecated
 
 Please prefer our Constructable `%placeholder` styles over singular CSS
@@ -111,37 +114,32 @@ use `-mask`, use `-icon` instead:
 
 ```css
 .selector::before {
-  @extend %with-logo-consul-color-icon, %as-pseudo;
+  @extend %with-alert-circle-icon, %as-pseudo;
 }
 ```
 
 ```hbs preview-template
 <figure>
-    <select
-      onchange={{action (mut this.type) value="target.value"}}
-    >
+  <select onchange={{action (mut this.type) value='target.value'}}>
     <option>colored</option>
     <option>monochrome</option>
   </select>
-    <select
-      onchange={{action (mut this.theme) value="target.value"}}
-    >
+  <select onchange={{action (mut this.theme) value='target.value'}}>
     <option>light</option>
     <option>dark</option>
   </select>
   <input
-      oninput={{action (mut this.size) value="target.value"}}
-      type="range" min="100" max="900" step="100"
+    oninput={{action (mut this.size) value='target.value'}}
+    type='range'
+    min='100'
+    max='900'
+    step='100'
   />
   {{this.size}}
 </figure>
 <ul
-  {{css-props (set this 'icons')
-    prefix='icon-'
-  }}
-  class={{class-map
-    (concat 'theme-' (or this.theme 'light'))
-  }}
+  {{css-props (set this 'icons') prefix='icon-'}}
+  class={{class-map (concat 'theme-' (or this.theme 'light'))}}
   style={{style-map
     (array '--icon-color' (if (eq this.type 'monochrome') 'rgb(var(--black))'))
     (array '--icon-size' (concat 'icon-' (or this.size '500')))
@@ -149,20 +147,17 @@ use `-mask`, use `-icon` instead:
   }}
 >
   {{#each-in this.icons as |prop value|}}
-{{#if (and
+    {{#if
+      (and
         (not (includes prop (array '--icon-name' '--icon-color' '--icon-size' '--icon-resolution')))
         (not (string-includes prop '-24'))
       )
     }}
-{{#let
-  (string-replace (string-replace prop '-16' '') '--' '')
-as |name|}}
+      {{#let (string-replace (string-replace prop '-16' '') '--' '') as |name|}}
         <li>
           <figure
             {{with-copyable (concat '--icon-name: ' name ';content: "";')}}
-      style={{style-map
-        (array '--icon-name-start' name)
-      }}
+            style={{style-map (array '--icon-name-start' name)}}
           >
             <figcaption>{{name}}</figcaption>
           </figure>
@@ -172,4 +167,3 @@ as |name|}}
   {{/each-in}}
 </ul>
 ```
-

ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/index.scss

@@ -1,6 +0,0 @@
-
-        @import './property-16';
-        @import './property-24';
-        @import './keyframes';
-        @import './placeholders';
-      

ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/keyframes.scss

@@ -1,5 +0,0 @@
-@keyframes icon-aws-color {
-  100% {
-    background-image: var(--icon-aws-color-16);
-  }
-}

ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/placeholders.scss

@@ -1,10 +0,0 @@
-
-%with-aws-color-icon {
-  --icon-name: icon-aws-color;
-  content: '';
-}
-%with-aws-color-mask {
-  --icon-name: icon-aws-color;
-  content: '';
-}
-  

ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/property-16.scss

@@ -1,3 +0,0 @@
-:root {
-  --icon-aws-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23252F3E" d="M4.51 7.687c0 .197.02.357.058.475.042.117.096.245.17.384a.233.233 0 01.037.123c0 .053-.032.107-.1.16l-.336.224a.255.255 0 01-.138.048c-.054 0-.107-.026-.16-.074a1.652 1.652 0 01-.192-.251 4.137 4.137 0 01-.165-.315c-.415.491-.936.737-1.564.737-.447 0-.804-.129-1.064-.385-.261-.256-.394-.598-.394-1.025 0-.454.16-.822.484-1.1.325-.278.756-.416 1.304-.416.18 0 .367.016.564.042.197.027.4.07.612.118v-.39c0-.406-.085-.689-.25-.854-.17-.166-.458-.246-.868-.246-.186 0-.377.022-.574.07a4.23 4.23 0 00-.575.181 1.525 1.525 0 01-.186.07.326.326 0 01-.085.016c-.075 0-.112-.054-.112-.166v-.262c0-.085.01-.15.037-.186a.399.399 0 01.15-.113c.185-.096.409-.176.67-.24.26-.07.537-.101.83-.101.633 0 1.096.144 1.394.432.293.288.442.726.442 1.314v1.73h.01zm-2.161.811c.175 0 .356-.032.548-.096.191-.064.362-.182.505-.342a.848.848 0 00.181-.341c.032-.129.054-.283.054-.465V7.03a4.43 4.43 0 00-.49-.09 3.996 3.996 0 00-.5-.033c-.357 0-.618.07-.793.214-.176.144-.26.347-.26.614 0 .25.063.437.196.566.128.133.314.197.559.197zm4.273.577c-.096 0-.16-.016-.202-.054-.043-.032-.08-.106-.112-.208l-1.25-4.127a.938.938 0 01-.049-.214c0-.085.043-.133.128-.133h.522c.1 0 .17.016.207.053.043.032.075.107.107.208l.894 3.535.83-3.535c.026-.106.058-.176.1-.208a.365.365 0 01.214-.053h.425c.102 0 .17.016.213.053.043.032.08.107.101.208l.841 3.578.92-3.578a.458.458 0 01.107-.208.346.346 0 01.208-.053h.495c.085 0 .133.043.133.133 0 .027-.006.054-.01.086a.76.76 0 01-.038.133l-1.283 4.127c-.032.107-.069.177-.111.209a.34.34 0 01-.203.053h-.457c-.101 0-.17-.016-.213-.053-.043-.038-.08-.107-.101-.214L8.213 5.37l-.82 3.439c-.026.107-.058.176-.1.213-.043.038-.118.054-.213.054h-.458zm6.838.144a3.51 3.51 0 01-.82-.096c-.266-.064-.473-.134-.612-.214-.085-.048-.143-.101-.165-.15a.378.378 0 01-.031-.149v-.272c0-.112.042-.166.122-.166a.3.3 0 01.096.016c.032.011.08.032.133.054.18.08.378.144.585.187.213.042.42.064.633.064.336 0 .596-.059.777-.176a.575.575 0 00.277-.508.52.52 0 00-.144-.373c-.095-.102-.276-.193-.537-.278l-.772-.24c-.388-.123-.676-.305-.851-.545a1.275 1.275 0 01-.266-.774c0-.224.048-.422.143-.593.096-.17.224-.32.384-.438.16-.122.34-.213.553-.277.213-.064.436-.091.67-.091.118 0 .24.005.357.021.122.016.234.038.346.06.106.026.208.052.303.085.096.032.17.064.224.096a.46.46 0 01.16.133.289.289 0 01.047.176v.251c0 .112-.042.171-.122.171a.552.552 0 01-.202-.064 2.427 2.427 0 00-1.022-.208c-.303 0-.543.048-.708.15-.165.1-.25.256-.25.475 0 .149.053.277.16.379.106.101.303.202.585.293l.756.24c.383.123.66.294.825.513.165.219.244.47.244.748 0 .23-.047.437-.138.619a1.436 1.436 0 01-.388.47c-.165.133-.362.23-.591.299-.24.075-.49.112-.761.112z"/><g fill="%23F90" fill-rule="evenodd" clip-rule="evenodd"><path d="M14.465 11.813c-1.75 1.297-4.294 1.986-6.481 1.986-3.065 0-5.827-1.137-7.913-3.027-.165-.15-.016-.353.18-.235 2.257 1.313 5.04 2.109 7.92 2.109 1.941 0 4.075-.406 6.039-1.239.293-.133.543.192.255.406z"/><path d="M15.194 10.98c-.223-.287-1.479-.138-2.048-.069-.17.022-.197-.128-.043-.24 1-.705 2.645-.502 2.836-.267.192.24-.053 1.89-.99 2.68-.143.123-.281.06-.218-.1.213-.53.687-1.72.463-2.003z"/></g></svg>');
-}

ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/property-24.scss

@@ -1,3 +0,0 @@
-:root {
-  --icon-aws-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23252F3E" d="M6.895 10.085c0 .288.031.521.085.692.063.172.14.359.25.561a.338.338 0 01.054.18c0 .077-.047.155-.148.233l-.49.327a.373.373 0 01-.203.07c-.077 0-.155-.039-.233-.11a2.408 2.408 0 01-.28-.365 6.031 6.031 0 01-.241-.46c-.607.717-1.37 1.075-2.288 1.075-.654 0-1.176-.187-1.557-.56-.381-.374-.576-.873-.576-1.495 0-.662.234-1.2.708-1.605.475-.404 1.105-.607 1.907-.607.265 0 .537.023.825.062.288.04.584.102.895.172v-.569c0-.591-.125-1.004-.366-1.246-.249-.24-.67-.358-1.268-.358a3.54 3.54 0 00-.84.102 6.2 6.2 0 00-.841.264 2.234 2.234 0 01-.273.101.477.477 0 01-.124.024c-.11 0-.164-.078-.164-.242V5.95c0-.125.016-.218.055-.273A.583.583 0 012 5.514c.272-.14.599-.257.98-.35a4.716 4.716 0 011.214-.148c.926 0 1.604.21 2.04.63.427.42.645 1.06.645 1.916v2.522h.016zm-3.16 1.183c.257 0 .522-.047.802-.14.28-.094.529-.265.74-.498.124-.148.217-.312.264-.499.046-.187.078-.412.078-.677v-.327a6.494 6.494 0 00-.716-.133 5.86 5.86 0 00-.732-.046c-.521 0-.903.1-1.16.311-.256.21-.381.506-.381.896 0 .366.093.638.288.825.187.195.46.288.817.288zm6.25.841c-.14 0-.234-.023-.296-.078-.062-.047-.117-.156-.164-.304L7.696 5.71a1.364 1.364 0 01-.07-.312c0-.124.063-.195.187-.195h.763c.148 0 .249.024.303.078.063.047.11.156.156.304l1.308 5.155 1.214-5.155c.039-.156.085-.257.147-.304a.535.535 0 01.312-.078h.622c.148 0 .25.024.312.078.062.047.117.156.148.304l1.23 5.217 1.346-5.217c.046-.156.1-.257.155-.304a.508.508 0 01.304-.078h.724c.124 0 .194.063.194.195 0 .039-.008.078-.015.125a1.104 1.104 0 01-.055.194l-1.876 6.02c-.046.155-.1.256-.163.303a.497.497 0 01-.296.078h-.669c-.148 0-.249-.024-.311-.078-.063-.055-.117-.156-.148-.312l-1.206-5.022-1.199 5.015c-.039.155-.086.257-.148.311-.062.055-.171.078-.311.078h-.67zm10 .21a5.15 5.15 0 01-1.198-.14c-.39-.093-.693-.195-.895-.311-.125-.07-.21-.148-.242-.218a.55.55 0 01-.046-.218v-.398c0-.163.062-.24.179-.24a.44.44 0 01.14.022c.047.016.117.047.194.078.265.117.553.21.857.273.31.062.614.093.926.093.49 0 .871-.085 1.136-.257a.838.838 0 00.404-.74.758.758 0 00-.21-.544c-.14-.148-.404-.28-.786-.405l-1.128-.35c-.568-.18-.988-.445-1.245-.795a1.856 1.856 0 01-.39-1.129c0-.327.07-.615.21-.864.14-.25.328-.467.561-.639a2.47 2.47 0 01.81-.405 3.39 3.39 0 01.98-.132c.171 0 .35.008.521.031.18.024.343.055.506.086.156.039.304.078.444.124.14.047.249.094.327.14a.673.673 0 01.233.195.42.42 0 01.07.257V6.2c0 .164-.062.25-.179.25a.81.81 0 01-.295-.094 3.559 3.559 0 00-1.495-.304c-.443 0-.793.07-1.035.218-.241.148-.365.374-.365.693 0 .218.077.405.233.553.156.148.444.296.856.428l1.105.35c.56.18.965.429 1.207.748.24.32.358.685.358 1.09 0 .335-.07.639-.203.903-.14.265-.327.499-.568.686-.241.194-.53.335-.864.436a3.7 3.7 0 01-1.113.163z"/><g fill="%23F90" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.456 16.103c-2.56 1.892-6.28 2.897-9.48 2.897-4.482 0-8.522-1.659-11.572-4.415-.242-.218-.024-.514.264-.343 3.3 1.916 7.37 3.076 11.58 3.076 2.841 0 5.962-.592 8.834-1.806.428-.195.794.28.374.591z"/><path d="M22.522 14.889c-.327-.42-2.164-.203-2.996-.101-.25.03-.288-.187-.063-.35 1.463-1.029 3.868-.733 4.148-.39.28.35-.077 2.756-1.447 3.909-.21.179-.413.085-.32-.148.312-.771 1.005-2.508.678-2.92z"/></g></svg>');
-}

ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/index.scss

@@ -1,6 +0,0 @@
-
-        @import './property-16';
-        @import './property-24';
-        @import './keyframes';
-        @import './placeholders';
-      

ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/keyframes.scss

@@ -1,5 +0,0 @@
-@keyframes icon-aws-ec2-color {
-  100% {
-    background-image: var(--icon-aws-ec2-color-16);
-  }
-}

ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/placeholders.scss

@@ -1,10 +0,0 @@
-
-%with-aws-ec2-color-icon {
-  --icon-name: icon-aws-ec2-color;
-  content: '';
-}
-%with-aws-ec2-color-mask {
-  --icon-name: icon-aws-ec2-color;
-  content: '';
-}
-  

ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/property-16.scss

@@ -1,3 +0,0 @@
-:root {
-  --icon-aws-ec2-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%239D5025" d="M1.702 2.98L1 3.312v9.376l.702.332 2.842-4.777L1.702 2.98z"/><path fill="%23F58536" d="M3.339 12.657l-1.637.363V2.98l1.637.353v9.324z"/><path fill="%239D5025" d="M2.476 2.612l.863-.406 4.096 6.216-4.096 5.372-.863-.406V2.612z"/><path fill="%23F58536" d="M5.38 13.248l-2.041.546V2.206l2.04.548v10.494z"/><path fill="%239D5025" d="M4.3 1.75l1.08-.512 6.043 7.864-6.043 5.66-1.08-.511V1.749z"/><path fill="%23F58536" d="M7.998 13.856l-2.618.906V1.238l2.618.908v11.71z"/><path fill="%239D5025" d="M6.602.66L7.998 0l6.538 8.453L7.998 16l-1.396-.66V.66z"/><path fill="%23F58536" d="M15 12.686L7.998 16V0L15 3.314v9.372z"/></svg>');
-}

ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/property-24.scss

@@ -1,3 +0,0 @@
-:root {
-  --icon-aws-ec2-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%239D5025" d="M3.003 4.47L2 4.967v14.064l1.003.499 4.06-7.167-4.06-7.895z"/><path fill="%23F58536" d="M5.341 18.985l-2.338.546V4.469L5.341 5v13.985z"/><path fill="%239D5025" d="M4.11 3.918L5.34 3.31l5.852 9.324-5.852 8.058-1.232-.61V3.919z"/><path fill="%23F58536" d="M8.257 19.872l-2.916.819V3.309l2.916.822v15.74z"/><path fill="%239D5025" d="M6.714 2.624l1.543-.767 8.633 11.796-8.633 8.49-1.543-.767V2.624z"/><path fill="%23F58536" d="M11.997 20.784l-3.74 1.359V1.857l3.74 1.362v17.565z"/><path fill="%239D5025" d="M10.002.991L11.997 0l9.34 12.68L11.997 24l-1.995-.991V.99z"/><path fill="%23F58536" d="M22 19.03L11.997 24V0L22 4.97v14.06z"/></svg>');
-}

ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/index.scss

@@ -1,6 +0,0 @@
-
-        @import '../aws-ec2-color/property-16';
-        @import '../aws-ec2-color/property-24';
-        @import './keyframes';
-        @import './placeholders';
-      

ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/keyframes.scss

@@ -1,9 +0,0 @@
-@keyframes icon-aws-ec2 {
-  100% {
-
-    -webkit-mask-image: var(--icon-aws-ec2-color-16);
-    mask-image: var(--icon-aws-ec2-color-16);
-    background-color: var(--icon-color, var(--color-aws-ec2-500, currentColor));
-
-  }
-}

ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/placeholders.scss

@@ -1,10 +0,0 @@
-
-%with-aws-ec2-icon {
-  --icon-name: icon-aws-ec2;
-  content: '';
-}
-%with-aws-ec2-mask {
-  --icon-name: icon-aws-ec2;
-  content: '';
-}
-  

ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/property-16.scss

@@ -1,3 +0,0 @@
-:root {
-  --icon-aws-ec2-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.602.66L7.998 0 15 3.314v9.372L7.998 16l-1.396-.66V.66zM5.38 1.238L4.3 1.75v12.502l1.08.51V1.239zM2.476 2.612l.863-.406v11.588l-.863-.406V2.612zM1.7 2.98V13.02l-.7-.332V3.312l.7-.33z"/></g></svg>');
-}

ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/property-24.scss

@@ -1,3 +0,0 @@
-:root {
-  --icon-aws-ec2-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.602.66L7.998 0 15 3.314v9.372L7.998 16l-1.396-.66V.66zM5.38 1.238L4.3 1.75v12.502l1.08.51V1.239zM2.476 2.612l.863-.406v11.588l-.863-.406V2.612zM1.7 2.98V13.02l-.7-.332V3.312l.7-.33z"/></g></svg>');
-}

ui/packages/consul-ui/app/styles/base/icons/icons/aws/index.scss

@@ -1,6 +0,0 @@
-
-        @import '../aws-color/property-16';
-        @import '../aws-color/property-24';
-        @import './keyframes';
-        @import './placeholders';
-      

ui/packages/consul-ui/app/styles/base/icons/icons/aws/keyframes.scss

@@ -1,9 +0,0 @@
-@keyframes icon-aws {
-  100% {
-
-    -webkit-mask-image: var(--icon-aws-color-16);
-    mask-image: var(--icon-aws-color-16);
-    background-color: var(--icon-color, var(--color-aws-500, currentColor));
-
-  }
-}

ui/packages/consul-ui/app/styles/base/icons/icons/aws/placeholders.scss

@@ -1,10 +0,0 @@
-
-%with-aws-icon {
-  --icon-name: icon-aws;
-  content: '';
-}
-%with-aws-mask {
-  --icon-name: icon-aws;
-  content: '';
-}
-  

ui/packages/consul-ui/app/styles/base/icons/icons/aws/property-16.scss

@@ -1,3 +0,0 @@
-:root {
-  --icon-aws-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.51 7.687c0 .197.02.357.058.475.042.117.096.245.17.384a.233.233 0 01.037.123c0 .053-.032.107-.1.16l-.336.224a.255.255 0 01-.138.048c-.054 0-.107-.026-.16-.074a1.652 1.652 0 01-.192-.251 4.137 4.137 0 01-.164-.315c-.416.491-.937.737-1.565.737-.447 0-.804-.129-1.064-.385-.261-.256-.394-.598-.394-1.025 0-.454.16-.822.484-1.1.325-.278.756-.416 1.304-.416.18 0 .367.016.564.042.197.027.4.07.612.118v-.39c0-.406-.085-.689-.25-.854-.17-.166-.458-.246-.868-.246-.186 0-.377.022-.574.07a4.23 4.23 0 00-.575.181 1.525 1.525 0 01-.186.07.326.326 0 01-.085.016c-.075 0-.112-.054-.112-.166v-.262c0-.085.01-.15.037-.186a.399.399 0 01.15-.113c.185-.096.409-.176.67-.24.26-.07.537-.101.83-.101.633 0 1.096.144 1.394.432.293.288.442.726.442 1.314v1.73h.01zm-2.161.811c.175 0 .356-.032.548-.096.192-.064.362-.182.505-.342a.848.848 0 00.181-.341c.032-.129.054-.283.054-.465V7.03a4.43 4.43 0 00-.49-.09 3.996 3.996 0 00-.5-.033c-.357 0-.617.07-.793.214-.176.144-.26.347-.26.614 0 .25.063.437.196.566.128.133.314.197.559.197zm4.273.577c-.096 0-.16-.016-.202-.054-.043-.032-.08-.106-.112-.208l-1.25-4.127a.938.938 0 01-.048-.214c0-.085.042-.133.127-.133h.522c.1 0 .17.016.207.053.043.032.075.107.107.208l.894 3.535.83-3.535c.026-.106.058-.176.101-.208a.365.365 0 01.213-.053h.426c.1 0 .17.016.212.053.043.032.08.107.102.208l.84 3.578.92-3.578a.459.459 0 01.107-.208.347.347 0 01.208-.053h.495c.085 0 .133.043.133.133 0 .027-.006.054-.01.086a.768.768 0 01-.038.133l-1.283 4.127c-.031.107-.069.177-.111.209a.34.34 0 01-.203.053h-.457c-.101 0-.17-.016-.213-.053-.043-.038-.08-.107-.101-.214L8.213 5.37l-.82 3.439c-.026.107-.058.176-.1.213-.043.038-.118.054-.213.054h-.458zm6.838.144a3.51 3.51 0 01-.82-.096c-.266-.064-.473-.134-.612-.214-.085-.048-.143-.101-.165-.15a.38.38 0 01-.031-.149v-.272c0-.112.042-.166.122-.166a.3.3 0 01.096.016c.032.011.08.032.133.054.18.08.378.144.585.187.213.042.42.064.633.064.336 0 .596-.059.777-.176a.575.575 0 00.277-.508.52.52 0 00-.144-.373c-.095-.102-.276-.193-.537-.278l-.772-.24c-.388-.123-.676-.305-.851-.545a1.275 1.275 0 01-.266-.774c0-.224.048-.422.143-.593.096-.17.224-.32.384-.438.16-.122.34-.213.553-.277.213-.064.436-.091.67-.091.118 0 .24.005.357.021.122.016.234.038.346.06.106.026.208.052.303.085.096.032.17.064.224.096a.461.461 0 01.16.133.289.289 0 01.047.176v.251c0 .112-.042.171-.122.171a.552.552 0 01-.202-.064 2.428 2.428 0 00-1.022-.208c-.303 0-.543.048-.708.15-.165.1-.25.256-.25.475 0 .149.053.277.16.379.106.101.303.202.585.293l.756.24c.383.123.66.294.825.513.165.219.244.47.244.748 0 .23-.047.437-.138.619a1.435 1.435 0 01-.388.47c-.165.133-.362.23-.591.299-.24.075-.49.112-.761.112z"/><path fill-rule="evenodd" d="M14.465 11.813c-1.75 1.297-4.294 1.986-6.481 1.986-3.065 0-5.827-1.137-7.913-3.027-.165-.15-.016-.353.18-.235 2.257 1.313 5.04 2.109 7.92 2.109 1.941 0 4.075-.406 6.039-1.239.293-.133.543.192.255.406z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M15.194 10.98c-.223-.287-1.479-.138-2.048-.069-.17.022-.197-.128-.043-.24 1-.705 2.645-.502 2.836-.267.192.24-.053 1.89-.99 2.68-.143.123-.281.06-.217-.1.212-.53.686-1.72.462-2.003z" clip-rule="evenodd"/></g></svg>');
-}

ui/packages/consul-ui/app/styles/base/icons/icons/aws/property-24.scss

@@ -1,3 +0,0 @@
-:root {
-  --icon-aws-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.51 7.687c0 .197.02.357.058.475.042.117.096.245.17.384a.233.233 0 01.037.123c0 .053-.032.107-.1.16l-.336.224a.255.255 0 01-.138.048c-.054 0-.107-.026-.16-.074a1.652 1.652 0 01-.192-.251 4.137 4.137 0 01-.164-.315c-.416.491-.937.737-1.565.737-.447 0-.804-.129-1.064-.385-.261-.256-.394-.598-.394-1.025 0-.454.16-.822.484-1.1.325-.278.756-.416 1.304-.416.18 0 .367.016.564.042.197.027.4.07.612.118v-.39c0-.406-.085-.689-.25-.854-.17-.166-.458-.246-.868-.246-.186 0-.377.022-.574.07a4.23 4.23 0 00-.575.181 1.525 1.525 0 01-.186.07.326.326 0 01-.085.016c-.075 0-.112-.054-.112-.166v-.262c0-.085.01-.15.037-.186a.399.399 0 01.15-.113c.185-.096.409-.176.67-.24.26-.07.537-.101.83-.101.633 0 1.096.144 1.394.432.293.288.442.726.442 1.314v1.73h.01zm-2.161.811c.175 0 .356-.032.548-.096.192-.064.362-.182.505-.342a.848.848 0 00.181-.341c.032-.129.054-.283.054-.465V7.03a4.43 4.43 0 00-.49-.09 3.996 3.996 0 00-.5-.033c-.357 0-.617.07-.793.214-.176.144-.26.347-.26.614 0 .25.063.437.196.566.128.133.314.197.559.197zm4.273.577c-.096 0-.16-.016-.202-.054-.043-.032-.08-.106-.112-.208l-1.25-4.127a.938.938 0 01-.048-.214c0-.085.042-.133.127-.133h.522c.1 0 .17.016.207.053.043.032.075.107.107.208l.894 3.535.83-3.535c.026-.106.058-.176.101-.208a.365.365 0 01.213-.053h.426c.1 0 .17.016.212.053.043.032.08.107.102.208l.84 3.578.92-3.578a.459.459 0 01.107-.208.347.347 0 01.208-.053h.495c.085 0 .133.043.133.133 0 .027-.006.054-.01.086a.768.768 0 01-.038.133l-1.283 4.127c-.031.107-.069.177-.111.209a.34.34 0 01-.203.053h-.457c-.101 0-.17-.016-.213-.053-.043-.038-.08-.107-.101-.214L8.213 5.37l-.82 3.439c-.026.107-.058.176-.1.213-.043.038-.118.054-.213.054h-.458zm6.838.144a3.51 3.51 0 01-.82-.096c-.266-.064-.473-.134-.612-.214-.085-.048-.143-.101-.165-.15a.38.38 0 01-.031-.149v-.272c0-.112.042-.166.122-.166a.3.3 0 01.096.016c.032.011.08.032.133.054.18.08.378.144.585.187.213.042.42.064.633.064.336 0 .596-.059.777-.176a.575.575 0 00.277-.508.52.52 0 00-.144-.373c-.095-.102-.276-.193-.537-.278l-.772-.24c-.388-.123-.676-.305-.851-.545a1.275 1.275 0 01-.266-.774c0-.224.048-.422.143-.593.096-.17.224-.32.384-.438.16-.122.34-.213.553-.277.213-.064.436-.091.67-.091.118 0 .24.005.357.021.122.016.234.038.346.06.106.026.208.052.303.085.096.032.17.064.224.096a.461.461 0 01.16.133.289.289 0 01.047.176v.251c0 .112-.042.171-.122.171a.552.552 0 01-.202-.064 2.428 2.428 0 00-1.022-.208c-.303 0-.543.048-.708.15-.165.1-.25.256-.25.475 0 .149.053.277.16.379.106.101.303.202.585.293l.756.24c.383.123.66.294.825.513.165.219.244.47.244.748 0 .23-.047.437-.138.619a1.435 1.435 0 01-.388.47c-.165.133-.362.23-.591.299-.24.075-.49.112-.761.112z"/><path fill-rule="evenodd" d="M14.465 11.813c-1.75 1.297-4.294 1.986-6.481 1.986-3.065 0-5.827-1.137-7.913-3.027-.165-.15-.016-.353.18-.235 2.257 1.313 5.04 2.109 7.92 2.109 1.941 0 4.075-.406 6.039-1.239.293-.133.543.192.255.406z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M15.194 10.98c-.223-.287-1.479-.138-2.048-.069-.17.022-.197-.128-.043-.24 1-.705 2.645-.502 2.836-.267.192.24-.053 1.89-.99 2.68-.143.123-.281.06-.217-.1.212-.53.686-1.72.462-2.003z" clip-rule="evenodd"/></g></svg>');
-}

ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/index.scss

@@ -1,6 +0,0 @@
-
-        @import './property-16';
-        @import './property-24';
-        @import './keyframes';
-        @import './placeholders';
-      

ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/keyframes.scss

@@ -1,5 +0,0 @@
-@keyframes icon-consul-color {
-  100% {
-    background-image: var(--icon-consul-color-16);
-  }
-}

ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/placeholders.scss

@@ -1,10 +0,0 @@
-
-%with-consul-color-icon {
-  --icon-name: icon-consul-color;
-  content: '';
-}
-%with-consul-color-mask {
-  --icon-name: icon-consul-color;
-  content: '';
-}
-  

ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/property-16.scss

@@ -1,3 +0,0 @@
-:root {
-  --icon-consul-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23E03875"><path d="M8.006 15A7 7 0 1112.74 2.85l-1.66 1.738a4.6 4.6 0 100 6.828l1.66 1.737A6.98 6.98 0 018.006 15zM13.638 11.499a.573.573 0 110-1.147.573.573 0 010 1.147z"/><path d="M7.96 9.517a1.517 1.517 0 11-.012-3.034 1.517 1.517 0 01.013 3.034zM14.296 9.544a.574.574 0 110-1.148.574.574 0 010 1.148zM12.59 9.472a.574.574 0 110-1.148.574.574 0 010 1.148zM14.296 7.61a.574.574 0 110-1.147.574.574 0 010 1.147zM12.59 7.675a.574.574 0 110-1.148.574.574 0 010 1.148zM13.672 5.68a.574.574 0 11-.003-1.147.574.574 0 01.003 1.148z"/></g></svg>');
-}

ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/property-24.scss

@@ -1,3 +0,0 @@
-:root {
-  --icon-consul-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23E03875"><path d="M12.009 23a11 11 0 117.442-19.092l-2.61 2.73a7.229 7.229 0 100 10.73l2.61 2.73A10.97 10.97 0 0112.009 23zM20.86 17.498a.901.901 0 110-1.802.901.901 0 010 1.802z"/><path d="M11.939 14.383a2.383 2.383 0 11-.02-4.766 2.383 2.383 0 01.02 4.766zM21.895 14.426a.902.902 0 110-1.805.902.902 0 010 1.805zM19.214 14.313a.902.902 0 110-1.804.902.902 0 010 1.804zM21.895 11.387a.901.901 0 110-1.802.901.901 0 010 1.802zM19.214 11.49a.901.901 0 110-1.803.901.901 0 010 1.803zM20.913 8.355a.901.901 0 11-.004-1.803.901.901 0 01.004 1.803z"/></g></svg>');
-}

ui/packages/consul-ui/app/styles/base/icons/icons/consul/index.scss

@@ -1,6 +0,0 @@
-
-        @import '../consul-color/property-16';
-        @import '../consul-color/property-24';
-        @import './keyframes';
-        @import './placeholders';
-      

ui/packages/consul-ui/app/styles/base/icons/icons/consul/keyframes.scss

@@ -1,9 +0,0 @@
-@keyframes icon-consul {
-  100% {
-
-    -webkit-mask-image: var(--icon-consul-color-16);
-    mask-image: var(--icon-consul-color-16);
-    background-color: var(--icon-color, var(--color-consul-500, currentColor));
-
-  }
-}

ui/packages/consul-ui/app/styles/base/icons/icons/consul/placeholders.scss

@@ -1,10 +0,0 @@
-
-%with-consul-icon {
-  --icon-name: icon-consul;
-  content: '';
-}
-%with-consul-mask {
-  --icon-name: icon-consul;
-  content: '';
-}
-  

ui/packages/consul-ui/app/styles/base/icons/icons/consul/property-16.scss

@@ -1,3 +0,0 @@
-:root {
-  --icon-consul-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.737 14.193A7 7 0 008.006 15a6.98 6.98 0 004.735-1.847l-1.66-1.737a4.6 4.6 0 110-6.828l1.66-1.738a7 7 0 10-8.004 11.343zM13.32 11.402a.573.573 0 10.637-.953.573.573 0 00-.637.953z"/><path d="M7.96 9.517a1.517 1.517 0 11-.012-3.034 1.517 1.517 0 01.013 3.034zM13.978 9.447a.574.574 0 10.637-.954.574.574 0 00-.637.954zM12.59 9.472a.574.574 0 110-1.148.574.574 0 010 1.148zM13.978 7.514a.574.574 0 10.637-.954.574.574 0 00-.637.954zM12.59 7.675a.574.574 0 110-1.148.574.574 0 010 1.148zM13.353 5.585a.574.574 0 10.635-.956.574.574 0 00-.635.956z"/></g></svg>');
-}

ui/packages/consul-ui/app/styles/base/icons/icons/consul/property-24.scss

@@ -1,3 +0,0 @@
-:root {
-  --icon-consul-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.737 14.193A7 7 0 008.006 15a6.98 6.98 0 004.735-1.847l-1.66-1.737a4.6 4.6 0 110-6.828l1.66-1.738a7 7 0 10-8.004 11.343zM13.32 11.402a.573.573 0 10.637-.953.573.573 0 00-.637.953z"/><path d="M7.96 9.517a1.517 1.517 0 11-.012-3.034 1.517 1.517 0 01.013 3.034zM13.978 9.447a.574.574 0 10.637-.954.574.574 0 00-.637.954zM12.59 9.472a.574.574 0 110-1.148.574.574 0 010 1.148zM13.978 7.514a.574.574 0 10.637-.954.574.574 0 00-.637.954zM12.59 7.675a.574.574 0 110-1.148.574.574 0 010 1.148zM13.353 5.585a.574.574 0 10.635-.956.574.574 0 00-.635.956z"/></g></svg>');
-}

ui/packages/consul-ui/app/styles/base/icons/icons/index.scss

@@ -75,8 +75,6 @@
 // @import './lock-open/index.scss';
 // @import './logo-alicloud-color/index.scss';
 // @import './logo-alicloud-monochrome/index.scss';
-// @import './logo-aws-color/index.scss';
-// @import './logo-aws-monochrome/index.scss';
 // @import './logo-azure-color/index.scss';
 // @import './logo-azure-dev-ops-color/index.scss';
 // @import './logo-azure-dev-ops-monochrome/index.scss';
@@ -192,10 +190,6 @@
 // @import './auth0-color/index.scss';
 // @import './auto-apply/index.scss';
 // @import './award/index.scss';
-@import './aws/index.scss';
-@import './aws-color/index.scss';
-// @import './aws-ec2/index.scss';
-// @import './aws-ec2-color/index.scss';
 // @import './azure/index.scss';
 // @import './azure-color/index.scss';
 // @import './azure-devops/index.scss';
@@ -276,8 +270,6 @@
 // @import './compass/index.scss';
 // @import './connection/index.scss';
 // @import './connection-gateway/index.scss';
-@import './consul/index.scss';
-// @import './consul-color/index.scss';
 // @import './corner-down-left/index.scss';
 // @import './corner-down-right/index.scss';
 // @import './corner-left-down/index.scss';
@@ -455,8 +447,6 @@
 @import './network-alt/index.scss';
 // @import './newspaper/index.scss';
 // @import './node/index.scss';
-// @import './nomad/index.scss';
-// @import './nomad-color/index.scss';
 // @import './octagon/index.scss';
 // @import './okta/index.scss';
 // @import './okta-color/index.scss';
@@ -635,17 +625,13 @@
 // @import './layers/index.scss';
 @import './loading-motion/index.scss';
 @import './logo-auth0-color/index.scss';
-@import './logo-consul-color/index.scss';
 @import './logo-ember-circle-color/index.scss';
 @import './logo-glimmer-color/index.scss';
 // @import './logo-hashicorp-color/index.scss';
 @import './logo-jwt-color/index.scss';
 @import './logo-microsoft-color/index.scss';
-@import './logo-nomad-color/index.scss';
 @import './logo-oidc-color/index.scss';
 @import './logo-okta-color/index.scss';
-@import './logo-terraform-color/index.scss';
-// @import './logo-vault-color/index.scss';
 @import './mesh/index.scss';
 // @import './path/index.scss';
 @import './port/index.scss';

ui/packages/consul-ui/app/styles/base/icons/icons/logo-consul-color/index.scss

@@ -1,6 +0,0 @@
-
-        @import '../consul-color/property-16';
-        @import '../consul-color/property-24';
-        @import './keyframes';
-        @import './placeholders';
-      

ui/packages/consul-ui/app/styles/base/icons/icons/logo-consul-color/keyframes.scss

@@ -1,5 +0,0 @@
-@keyframes icon-logo-consul-color {
-  100% {
-    background-image: var(--icon-consul-color-16);
-  }
-}

ui/packages/consul-ui/app/styles/base/icons/icons/logo-consul-color/placeholders.scss

@@ -1,10 +0,0 @@
-
-%with-logo-consul-color-icon {
-  --icon-name: icon-logo-consul-color;
-  content: '';
-}
-%with-logo-consul-color-mask {
-  --icon-name: icon-logo-consul-color;
-  content: '';
-}
-  

ui/packages/consul-ui/app/styles/base/icons/icons/logo-nomad-color/index.scss

@@ -1,6 +0,0 @@
-
-        @import '../nomad-color/property-16';
-        @import '../nomad-color/property-24';
-        @import './keyframes';
-        @import './placeholders';
-      

ui/packages/consul-ui/app/styles/base/icons/icons/logo-nomad-color/keyframes.scss

@@ -1,5 +0,0 @@
-@keyframes icon-logo-nomad-color {
-  100% {
-    background-image: var(--icon-nomad-color-16);
-  }
-}

ui/packages/consul-ui/app/styles/base/icons/icons/logo-nomad-color/placeholders.scss

@@ -1,10 +0,0 @@
-
-%with-logo-nomad-color-icon {
-  --icon-name: icon-logo-nomad-color;
-  content: '';
-}
-%with-logo-nomad-color-mask {
-  --icon-name: icon-logo-nomad-color;
-  content: '';
-}
-  

ui/packages/consul-ui/app/styles/base/icons/icons/logo-terraform-color/index.scss

@@ -1,6 +0,0 @@
-
-        @import '../terraform-color/property-16';
-        @import '../terraform-color/property-24';
-        @import './keyframes';
-        @import './placeholders';
-      

ui/packages/consul-ui/app/styles/base/icons/icons/logo-terraform-color/keyframes.scss

@@ -1,5 +0,0 @@
-@keyframes icon-logo-terraform-color {
-  100% {
-    background-image: var(--icon-terraform-color-16);
-  }
-}

ui/packages/consul-ui/app/styles/base/icons/icons/logo-terraform-color/placeholders.scss

@@ -1,10 +0,0 @@
-
-%with-logo-terraform-color-icon {
-  --icon-name: icon-logo-terraform-color;
-  content: '';
-}
-%with-logo-terraform-color-mask {
-  --icon-name: icon-logo-terraform-color;
-  content: '';
-}
-  

ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/index.scss

@@ -1,6 +0,0 @@
-
-        @import './property-16';
-        
-        @import './keyframes';
-        @import './placeholders';
-      

ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/keyframes.scss

@@ -1,5 +0,0 @@
-@keyframes icon-logo-vault-color {
-  100% {
-    background-image: var(--icon-logo-vault-color-16);
-  }
-}

ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/placeholders.scss

@@ -1,10 +0,0 @@
-
-%with-logo-vault-color-icon {
-  --icon-name: icon-logo-vault-color;
-  content: '';
-}
-%with-logo-vault-color-mask {
-  --icon-name: icon-logo-vault-color;
-  content: '';
-}
-  

ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/property-16.scss

@@ -1,3 +0,0 @@
-:root {
-  --icon-logo-vault-color-16: url('data:image/svg+xml;charset=UTF-8,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L14.9453 30L30 0H0ZM16.724 6.02083H18.4635V7.76042H16.724V6.02083ZM11.5208 12.9766H13.2604V11.237H11.5208V12.9766ZM13.2604 10.3724H11.5208V8.6302H13.2604V10.3724ZM11.5208 7.76823H13.2604V6.02083H11.5208V7.76823ZM15.8646 15.5937H14.1302V13.8463H15.8698L15.8646 15.5937ZM14.1302 12.9896H15.8646L15.8698 11.237H14.1302V12.9896ZM15.8646 10.3854H14.1302V8.6302H15.8698L15.8646 10.3854ZM14.1302 7.78125H15.8646L15.8698 6.02083H14.1302V7.78125ZM16.7187 8.65105H18.4635V10.3906H16.7239L16.7187 8.65105ZM16.7344 11.237V13L18.4896 12.9766V11.237H16.7344Z" fill="%23000"/></svg>');
-}

ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/property-24.scss

@@ -1,3 +0,0 @@
-:root {
-  --icon-logo-vault-color-24: url('data:image/svg+xml;charset=UTF-8,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L14.9453 30L30 0H0ZM16.724 6.02083H18.4635V7.76042H16.724V6.02083ZM11.5208 12.9766H13.2604V11.237H11.5208V12.9766ZM13.2604 10.3724H11.5208V8.6302H13.2604V10.3724ZM11.5208 7.76823H13.2604V6.02083H11.5208V7.76823ZM15.8646 15.5937H14.1302V13.8463H15.8698L15.8646 15.5937ZM14.1302 12.9896H15.8646L15.8698 11.237H14.1302V12.9896ZM15.8646 10.3854H14.1302V8.6302H15.8698L15.8646 10.3854ZM14.1302 7.78125H15.8646L15.8698 6.02083H14.1302V7.78125ZM16.7187 8.65105H18.4635V10.3906H16.7239L16.7187 8.65105ZM16.7344 11.237V13L18.4896 12.9766V11.237H16.7344Z" fill="%23000"/></svg>');
-}

ui/packages/consul-ui/app/styles/debug.scss

@@ -5,7 +5,6 @@
 @import 'consul-ui/components/badge/debug';
 @import 'consul-ui/components/panel/debug';
 @import 'consul-ui/components/tile/debug';
-@import 'consul-ui/components/shadow-template/debug';
 @import 'consul-ui/components/csv-list/debug';
 @import 'consul-ui/components/horizontal-kv-list/debug';
 @import 'consul-ui/components/icon-definition/debug';

ui/packages/consul-ui/package.json

@@ -70,7 +70,7 @@
     "@hashicorp/design-system-components": "^1.0.4",
     "@hashicorp/design-system-tokens": "^1.0.0",
     "@hashicorp/ember-cli-api-double": "^4.0.0",
-    "@hashicorp/ember-flight-icons": "^2.0.12",
+    "@hashicorp/ember-flight-icons": "^3.0.0",
     "@html-next/vertical-collection": "^4.0.0",
     "@lit/reactive-element": "^1.2.1",
     "@xstate/fsm": "^1.4.0",

ui/yarn.lock

@@ -3315,11 +3315,26 @@
     ember-cli-babel "^7.26.11"
     ember-cli-htmlbars "^6.0.1"
 
+"@hashicorp/ember-flight-icons@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@hashicorp/ember-flight-icons/-/ember-flight-icons-3.0.0.tgz#fddeb8adfb036aa3573c55b7236b34172b49cba9"
+  integrity sha512-+QrV38Ix9dWLwMzdVcMcSmFfeSVGvWvB+3OVBq3ltOTmnoLPIAx8LT9UDZUZ1wa65ciO+a1YzLMmwWnQgX/r9Q==
+  dependencies:
+    "@hashicorp/flight-icons" "^2.11.0"
+    ember-auto-import "^2.4.1"
+    ember-cli-babel "^7.26.11"
+    ember-cli-htmlbars "^6.0.1"
+
 "@hashicorp/flight-icons@^2.10.0":
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/@hashicorp/flight-icons/-/flight-icons-2.10.0.tgz#24b03043bacda16e505200e6591dfef896ddacf1"
   integrity sha512-jYUA0M6Tz+4RAudil+GW/fHbhZPcKCiIZZAguBDviqbLneMkMgPOBgbXWCGWsEQ1fJzP2cXbUaio8L0aQZPWQw==
 
+"@hashicorp/flight-icons@^2.11.0":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@hashicorp/flight-icons/-/flight-icons-2.11.0.tgz#1500be99a42ee8512e7caece4bdae60ce8790577"
+  integrity sha512-teFkUY2di63JZ2gsegQgS+3f5YEP+GPuycB1Z2O+weInIrL33Ds0/J+lxFCmi2vkPAeY5xOnsclHYnhU6xOSmA==
+
 "@html-next/vertical-collection@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@html-next/vertical-collection/-/vertical-collection-4.0.0.tgz#b3b3d52358e15e7ed46e028d12424dab994690ed"