avo 4.0.0.beta.2 → 4.0.0.beta.3

data/app/components/avo/empty_state_component.rb

@@ -3,11 +3,20 @@
 class Avo::EmptyStateComponent < Avo::BaseComponent
   prop :message
   prop :by_association, default: false
+  prop :classes
 
   def text
     @message || locale_message
   end
 
+  def cards
+    [
+      {number: 1, position: :top, title: :large},
+      {number: 2, position: :middle, title: :large},
+      {number: 3, position: :bottom, title: :large}
+    ]
+  end
+
   private
 
   def locale_message

data/app/components/avo/fields/common/files/view_type/grid_item_component.html.erb

@@ -9,7 +9,7 @@
     <% else %>
       <%= content_tag file.representable? ? :a : :div, **document_arguments do %>
         <div class="flex flex-col justify-center items-center w-full">
-          <%= helpers.svg "heroicons/outline/document-text", class: 'h-10 text-gray-600 mb-2' %>
+          <%= helpers.svg "tabler/outline/file-text", class: 'h-10 text-gray-600 mb-2' %>
         </div>
       <% end %>
     <% end %>

data/app/components/avo/fields/common/key_value_component.html.erb

@@ -22,7 +22,7 @@
             data-action="click->key-value#addRow"
             class="key-value__action-button <%= 'cursor-not-allowed' if @field.disable_adding_rows %>"
           >
-            <%= helpers.svg "heroicons/outline/plus-circle", class: 'key-value__action-icon' %>
+            <%= helpers.svg "tabler/outline/circle-plus", class: 'key-value__action-icon' %>
           </a>
         </div>
       <% end %>

data/app/components/avo/fields/common/stars_component.html.erb

@@ -1,7 +1,7 @@
 <div class="rating-group" data-component="<%= component_name %>"> 
   <% (1..@max).each do |rating_value| %>
     <%= helpers.svg(
-      'heroicons/solid/star',
+      'tabler/filled/star',
       class: class_names("star inline-block me-0.5", filled: rating_value <= (@value || 0))
     ) %>
   <% end %>

data/app/components/avo/fields/common/status_viewer_component.html.erb

@@ -1,10 +1,10 @@
 <div class=" <%= class_names("flex shrink-0 items-center", "text-red-600": @status == 'failed', "text-green-600": @status == 'success', "text-gray-600": @status == 'neutral') %>">
   <% if @status == 'success' %>
-    <%= helpers.svg 'heroicons/solid/check-circle', class: 'h-4' %>
+    <%= helpers.svg 'tabler/filled/circle-check', class: 'h-4' %>
   <% elsif @status == 'failed' %>
-    <%= helpers.svg 'heroicons/solid/x-circle', class: 'h-4' %>
+    <%= helpers.svg 'tabler/filled/circle-x', class: 'h-4' %>
   <% elsif @status == 'neutral' %>
-    <%= helpers.svg 'heroicons/solid/minus-circle', class: 'h-4' %>
+    <%= helpers.svg 'avo/circle-minus', class: 'h-4' %>
   <% elsif @status == 'loading' %>
     <div class="spinner">
       <div class="double-bounce1"></div>

data/app/components/avo/fields/preview_field/index_component.rb

@@ -4,7 +4,7 @@ class Avo::Fields::PreviewField::IndexComponent < Avo::Fields::IndexComponent
   def render_preview
     link_to resource_view_path, title: t("avo.view_item", item: @resource.name).humanize do
       helpers.svg(
-        "heroicons/outline/magnifying-glass-circle",
+        "tabler/outline/zoom-scan",
         class: "block h-6 text-gray-600",
         data: {
           controller: "preview",

data/app/components/avo/fields/stars_field/edit_component.html.erb

@@ -9,7 +9,7 @@
       data-max="<%= @field.max %>"
       data-current-value="<%= @field.value || 0 %>">
       <% (1..@field.max).each do |rating_value| %>
-        <%= helpers.svg('heroicons/solid/star',
+        <%= helpers.svg('tabler/filled/star',
           class: class_names("star inline-block me-0.5", filled: rating_value <= (@value || 0)),
           data: {
             star_value: rating_value,

data/app/components/avo/filters_component.html.erb

@@ -2,7 +2,7 @@
   <div class="relative w-full flex justify-between">
     <%= a_button class: 'focus:outline-hidden',
       style: :primary,
-      icon: "avo/filter",
+      icon: "tabler/outline/filter",
       title: t('avo.click_to_reveal_filters'),
       'data-button': 'resource-filters',
       'data-action': 'click->toggle#togglePanel',

data/app/components/avo/items/switcher_component.html.erb

@@ -27,7 +27,7 @@
     <% end %>
   <% end %>
 <% elsif item.is_collaboration? %>
-  <%= render Avo::Collaborate::TimelineComponent.new(resource: @resource) %>
+  <%= render Avo::Collaboration::TimelineComponent.new(resource: @resource) %>
 <% elsif item.is_header? %>
   <% if @resource.cover.present? && @resource.cover.visible_in_current_view? %>
     <%= render Avo::CoverComponent.new cover: @resource.cover %>

data/app/components/avo/media_library/item_details_component.html.erb

@@ -1,5 +1,5 @@
 <div class="relative flex flex-col w-full max @container/details">
-  <%= link_to helpers.svg('heroicons/outline/x-mark', class: "size-6"), helpers.avo.media_library_index_path,
+  <%= link_to helpers.svg('tabler/outline/x', class: "size-6"), helpers.avo.media_library_index_path,
     class: "absolute z-10 inset-auto end-0 top-0 mt-2 me-2 block bg-white p-1 rounded-lg text-slate-600 hover:text-slate-900",
     title: t('avo.close'),
     data: {
@@ -15,7 +15,7 @@
         <%= video_tag(helpers.main_app.url_for(@blob), controls: true, preload: false, class: 'w-full') %>
       <% else %>
         <div class="relative h-full flex flex-col justify-center items-center w-full bg-slate-100">
-          <%= helpers.svg "heroicons/outline/document-text", class: 'h-10 text-gray-600 mb-2' %>
+          <%= helpers.svg "tabler/outline/file-text", class: 'h-10 text-gray-600 mb-2' %>
         </div>
       <% end %>
       <div class="flex justify-center w-full text-sm gap-4">

data/app/components/avo/media_library/list_component.html.erb

@@ -28,7 +28,7 @@
             media_library_attach_target: 'dropzone',
             action: 'click->media-library-attach#triggerFileBrowser',
           } do %>
-          <%= helpers.svg 'heroicons/outline/cloud-arrow-up', class: 'size-6 text-gray-400' %> Upload a file
+          <%= helpers.svg 'tabler/outline/cloud-upload', class: 'size-6 text-gray-400' %> Upload a file
           <small>Click to browse or drag and drop</small>
         <% end %>
 

data/app/components/avo/media_library/list_item_component.html.erb

@@ -3,7 +3,7 @@
   class: "relative group min-h-full max-w-full flex-1 flex flex-col justify-between gap-2 border border-slate-200 p-1.5 rounded-xl hover:border-blue-500 hover:outline data-[selected=true]:border-blue-500 data-[selected=true]:outline outline-blue-500",
   data: do %>
   <% if false && @attaching %>
-    <div class="absolute bg-blue-500 group-hover:opacity-100 group-data-[selected=true]:opacity-100 opacity-0 inset-auto start-0 top-0 text-white rounded-ss-xl rounded-ee-xl -ms-px -mt-px p-2"><div class="border border-white"><%= helpers.svg "heroicons/outline/check", class: 'group-data-[selected=true]:opacity-100 opacity-0 size-4' %></div></div>
+    <div class="absolute bg-blue-500 group-hover:opacity-100 group-data-[selected=true]:opacity-100 opacity-0 inset-auto start-0 top-0 text-white rounded-ss-xl rounded-ee-xl -ms-px -mt-px p-2"><div class="border border-white"><%= helpers.svg "tabler/outline/check", class: 'group-data-[selected=true]:opacity-100 opacity-0 size-4' %></div></div>
   <% end %>
   <div class="flex flex-col h-full aspect-video overflow-hidden rounded-lg justify-center items-center">
     <% if blob.image? %>
@@ -14,7 +14,7 @@
       <%= video_tag(helpers.main_app.url_for(blob), controls: true, preload: false, class: 'w-full') %>
     <% else %>
       <div class="relative h-full flex flex-col justify-center items-center w-full bg-slate-100">
-        <%= helpers.svg "heroicons/outline/document-text", class: 'h-10 text-gray-600 mb-2' %>
+        <%= helpers.svg "tabler/outline/file-text", class: 'h-10 text-gray-600 mb-2' %>
       </div>
     <% end %>
   </div>

data/app/components/avo/modal_component.html.erb

@@ -34,7 +34,7 @@
                   <% end %>
                   <% if @show_close_button %>
                     <button class="modal__close-button" data-action="click->modal#closeModal" aria-label="<%= t('avo.close') %>">
-                      <%= helpers.svg "heroicons/outline/x-mark", class: "size-5" %>
+                      <%= helpers.svg "tabler/outline/x", class: "size-5" %>
                     </button>
                   <% end %>
                 </div>

data/app/components/avo/paginator_component.html.erb

@@ -29,23 +29,29 @@
   </div>
 
   <%# Right: info + navigation grouped pill %>
-  <div class="pagination__controls">
-    <% if @resource.pagination_type.default? %>
-      <div class="pagination__info">
-        <span class="pagination__info-number">
-          <%= "#{@pagy.from}-#{@pagy.to}" %>
-        </span>
-        &nbsp; of &nbsp;
-        <span>
-          <%= "#{@pagy.count}" %>
-        </span>
-      </div>
-    <% end %>
+  <div class="pagination__controls-wrap">
+    <div class="pagination__controls">
+      <% if @resource.pagination_type.default? %>
+        <div class="pagination__info">
+          <span class="pagination__info-number">
+            <%= "#{formatted_number(@pagy.from)}-#{formatted_number(@pagy.to)}" %>
+          </span>
+          &nbsp; of &nbsp;
+          <% if @pagy.count >= 10_000 %>
+            <span title="<%= formatted_count %>" data-tippy="tooltip">
+              <%= number_to_social(@pagy.count, start_at: 10_000) %>
+            </span>
+          <% else %>
+            <span><%= formatted_count %></span>
+          <% end %>
+        </div>
+      <% end %>
 
-    <% if @pagy.pages > 1 %>
-      <div class="pagination__nav">
-        <%== @pagy.series_nav(anchor_string: "data-turbo-frame=\"#{@turbo_frame}\"") %>
-      </div>
-    <% end %>
+      <% if @pagy.pages > 1 %>
+        <div class="pagination__nav">
+          <%== formatted_series_nav %>
+        </div>
+      <% end %>
+    </div>
   </div>
 </div>

data/app/components/avo/paginator_component.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class Avo::PaginatorComponent < Avo::BaseComponent
+  NUMBER_DELIMITER = "."
+
   prop :resource
   prop :parent_record
   prop :parent_resource
@@ -52,4 +54,20 @@ class Avo::PaginatorComponent < Avo::BaseComponent
     num = helpers.content_tag(:span, option, class: "pagination__per-page-option-num")
     "#{num} #{t("avo.per_page").downcase}".html_safe
   end
+
+  def formatted_count
+    formatted_number(@pagy.count)
+  end
+
+  def formatted_series_nav
+    @pagy.series_nav(anchor_string: %(data-turbo-frame="#{@turbo_frame}"))
+      .gsub(/>(\d{4,})</) { |match| match.sub($1, formatted_number($1)) }
+      .html_safe
+  end
+
+  private
+
+  def formatted_number(number)
+    helpers.number_with_delimiter(number, delimiter: NUMBER_DELIMITER)
+  end
 end

data/app/components/avo/resource_component.rb

@@ -117,7 +117,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
         tippy: control.title ? :tooltip : nil,
         action: via_belongs_to ? "click->modal#close" : nil
       }.compact,
-      icon: "heroicons/outline/arrow-left" do
+      icon: "tabler/outline/arrow-left" do
       control.label
     end
   end
@@ -181,7 +181,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
       style: :primary,
       loading: true,
       type: :submit,
-      icon: "avo/save",
+      icon: "tabler/outline/device-floppy",
       data: data_attributes do
       control.label
     end

data/app/components/avo/sidebar/group_component.html.erb

@@ -14,7 +14,7 @@
         <span class="sidebar-icon <%= 'sidebar-icon--collapsed' if collapsed %>"
           data-menu-target="svg"
         >
-          <%= helpers.svg 'heroicons/outline/chevron-down', class: 'h-4' %>
+          <%= helpers.svg 'tabler/outline/chevron-down', class: 'h-4' %>
         </span>
       </button>
     <% else %>

data/app/components/avo/sidebar/section_component.html.erb

@@ -15,7 +15,7 @@
         <span class="sidebar-section__icon sidebar-icon <%= 'sidebar-icon--collapsed' if collapsed %>"
           data-menu-target="svg"
         >
-          <%= helpers.svg 'heroicons/outline/chevron-down' %>
+          <%= helpers.svg 'tabler/outline/chevron-down' %>
         </span>
       </button>
     <% else %>

data/app/components/avo/sidebar_profile_component.html.erb

@@ -41,7 +41,7 @@
           },
           class: 'sidebar-profile__form' do |form| %>
           <%= form.button turbo_confirm: t('avo.are_you_sure'), class: "sidebar-profile__sign-out" do %>
-            <%= helpers.svg "avo/logout", class: 'sidebar-profile__sign-out-icon sidebar-icon' %> <%= t('avo.sign_out') %>
+            <%= helpers.svg "tabler/outline/logout", class: 'sidebar-profile__sign-out-icon sidebar-icon' %> <%= t('avo.sign_out') %>
           <% end %>
         <% end %>
       <% end %>

data/app/components/avo/views/resource_index_component.rb

@@ -136,7 +136,7 @@ class Avo::Views::ResourceIndexComponent < Avo::ResourceComponent
 
     a_button size: :sm,
       color: :primary,
-      icon: "avo/filter",
+      icon: "tabler/outline/filter",
       data: {
         controller: "avo-filters",
         action: "click->avo-filters#toggleFiltersArea",

data/app/views/avo/base/_date_time_filter.html.erb

@@ -24,7 +24,7 @@
           action: "click->date-time-filter#clear",
           tippy: :tooltip
         } do %>
-        <%= svg "avo/times", class: "h-4" %>
+        <%= svg "tabler/outline/x", class: "h-4" %>
       <% end %>
     </div>
     <div class="flex justify-end">

data/app/views/avo/base/preview.html.erb

@@ -27,7 +27,7 @@
     <div class="shadow-lg rounded px-4 py-3 relative border text-white pointer-events-auto bg-blue-400 border-blue-600 m-2">
       <div class="flex px-2">
         <div class="shrink-0">
-          <%= svg "heroicons/solid/exclamation-circle", class: "h-6" %>
+          <%= svg "tabler/filled/alert-circle", class: "h-6" %>
         </div>
         <div class="ms-3 flex-1 pt-0.5">
           <p class="text-sm leading-5 font-semibold"><%= t "avo.not_authorized" %></p>

data/app/views/avo/debug/_valid_indicator.html.erb

@@ -1,9 +1,9 @@
 <% if valid %>
   <span class="text-green-700 text-xl">
-    <%= svg "heroicons/outline/check-badge", class: "h-5 inline -mt-1 relative" %> <span>Valid</span>
+    <%= svg "tabler/outline/rosette-discount-check", class: "h-5 inline -mt-1 relative" %> <span>Valid</span>
   </span>
 <% else %>
   <span class="text-orange-700 text-xl">
-    <%= svg "heroicons/outline/exclamation-circle", class: "h-5 inline -mt-1 relative" %> <span>Invalid</span>
+    <%= svg "tabler/outline/exclamation-circle", class: "h-5 inline -mt-1 relative" %> <span>Invalid</span>
   </span>
 <% end %>

data/app/views/avo/home/failed_to_load.html.erb

@@ -1,18 +1,45 @@
-<%= render Avo::TurboFrameWrapperComponent.new(params[:turbo_frame]) do %>
-  <%
-  classes = 'absolute inset-auto start-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2'
-  label = t 'avo.failed_to_load'
-  src_url = params[:src].present? && !params[:src].starts_with?('http://') ? CGI.escapeHTML(params[:src]) : nil
+<%
+  src_url = params[:src].present? && !params[:src].starts_with?("http://") ? CGI.escapeHTML(params[:src]) : nil
+  frame_label = if params[:turbo_frame].present?
+    params[:turbo_frame].to_s.humanize.downcase
+  else
+    "this frame"
+  end
 %>
-  <div class="relative flex-1 py-4">
-    <div class="relative block text-gray-300 h-64 w-full">
-      <%= svg "avo/failed_to_load", class: "#{classes} h-52 text-gray-400" %>
-    </div>
-    <div class="relative block text-center text-lg text-gray-400 font-semibold pb-6"><%= label %> <span class="border-b-2 border-gray-200 border-dashed"><%= params[:turbo_frame].to_s.humanize.downcase if params[:turbo_frame].present? %></span> frame</div>
-    <% if Rails.env.development? && src_url %>
-      <div class="text-center text-sm w-full pb-3">
-        This is not an issue with Avo. Use <%= link_to 'this page', src_url, target: :_blank %> to see why this frame failed to load.
+
+<%= render Avo::TurboFrameWrapperComponent.new(params[:turbo_frame]) do %>
+  <div class="state state--frame-load-failed">
+    <div class="state__illustration" aria-hidden="true">
+      <% %i[start center end].each do |position| %>
+        <div class="state__document state__document--<%= position %>">
+          <div class="state__document-body">
+            <div class="state__document-lines">
+              <span class="state__document-line"></span>
+              <span class="state__document-line"></span>
+              <span class="state__document-line"></span>
+              <span class="state__document-line"></span>
+              <span class="state__document-line state__document-line--short"></span>
+            </div>
+          </div>
+        </div>
+      <% end %>
+
+      <div class="state__magnifier">
+        <%= svg "tabler/outline/zoom", class: "state__magnifier-icon" %>
       </div>
+    </div>
+
+    <p class="state__message text-center font-normal">
+      Failed to load:
+      <span class="font-bold"><%= frame_label %></span>
+    </p>
+
+    <% if Rails.env.development? && src_url.present? %>
+      <p class="state__note text-center font-normal">
+        Follow
+        <%= link_to "this link", src_url, target: "_blank", rel: "noopener", class: "state__link font-normal" %>
+        for more details about the issue and how to fix it.
+      </p>
     <% end %>
   </div>
 <% end %>

data/app/views/avo/media_library/_form.html.erb

@@ -44,7 +44,7 @@
 
   <div class="w-full flex justify-end pe-6">
     <%= a_button type: :submit,
-      icon: "avo/save",
+      icon: "tabler/outline/device-floppy",
       size: :sm,
       style: :outline,
       data: {

data/app/views/avo/partials/_color_scheme_switcher.html.erb

@@ -37,7 +37,7 @@
             data-action="click->toggle#togglePanel"
             class="color-scheme-switcher__button color-scheme-switcher__button--accent"
             title="Accent color">
-      <%= svg "avo/color-swatch", class: "color-scheme-switcher__icon" %>
+      <%= svg "tabler/outline/color-swatch", class: "color-scheme-switcher__icon" %>
       <span class="color-scheme-switcher__accent-badge">
         <span class="color-scheme-switcher__accent-badge-preview color-scheme-switcher__accent-badge-preview--neutral"></span>
         <% accent_colors.each do |accent| %>
@@ -82,7 +82,7 @@
           data-scheme="auto"
           class="color-scheme-switcher__button"
           title="Auto (system preference)">
-    <%= svg "heroicons/outline/computer-desktop", class: "color-scheme-switcher__icon" %>
+    <%= svg "tabler/outline/device-desktop", class: "color-scheme-switcher__icon" %>
     <span class="sr-only">Auto</span>
   </button>
   <button type="button"
@@ -91,7 +91,7 @@
           data-scheme="light"
           class="color-scheme-switcher__button"
           title="Light mode">
-    <%= svg "heroicons/outline/sun", class: "color-scheme-switcher__icon" %>
+    <%= svg "tabler/outline/sun", class: "color-scheme-switcher__icon" %>
     <span class="sr-only">Light</span>
   </button>
   <button type="button"
@@ -100,7 +100,7 @@
           data-scheme="dark"
           class="color-scheme-switcher__button"
           title="Dark mode">
-    <%= svg "heroicons/outline/moon", class: "color-scheme-switcher__icon" %>
+    <%= svg "tabler/outline/moon", class: "color-scheme-switcher__icon" %>
     <span class="sr-only">Dark</span>
   </button>
 </div>

data/app/views/avo/partials/_custom_tools_alert.html.erb

@@ -1,7 +1,7 @@
 <% if @custom_tools_alert_visible %>
   <div class="w-full inset-auto bottom-0 z-50 mb-4 opacity-75 hover:opacity-100 transition-opacity duration-150">
     <a href="https://avohq.io/pricing" target="_blank" class="rounded-sm bg-orange-700 text-white py-2 px-4 text-sm block items-center flex leading-tight">
-      <%= svg "avo/exclamation", class: "h-6 inline me-2 text-bold shrink-0 me-1" %> Warning. <%= @custom_tools_alert_visible %> This page will not be visible in a production environment.
+      <%= svg "tabler/outline/alert-triangle", class: "h-6 inline me-2 text-bold shrink-0 me-1" %> Warning. <%= @custom_tools_alert_visible %> This page will not be visible in a production environment.
     </a>
   </div>
 <% end %>
@@ -13,7 +13,7 @@
       %>
       <div class="w-full inset-auto bottom-0 z-50 mb-4 opacity-75 hover:opacity-100 transition-opacity duration-150">
         <a href="<%= url %>" target="<%= target %>" class="rounded-sm bg-orange-700 text-white py-2 px-4 text-sm items-center flex leading-tight space-x-2 rtl:space-x-reverse">
-          <%= svg "avo/exclamation", class: "h-6 inline me-2 text-bold shrink-0 me-1" %>
+          <%= svg "tabler/outline/alert-triangle", class: "h-6 inline me-2 text-bold shrink-0 me-1" %>
           <div>
             <%= simple_format message %>
           </div>
@@ -22,7 +22,7 @@
     <% elsif error.is_a? String %>
       <div class="w-full inset-auto bottom-0 z-50 mb-4 opacity-75 hover:opacity-100 transition-opacity duration-150">
         <div class="rounded-sm bg-orange-700 text-white py-2 px-4 text-sm items-center flex leading-tight space-x-2 rtl:space-x-reverse">
-          <%= svg "avo/exclamation", class: "h-6 inline me-2 text-bold shrink-0 me-1" %>
+          <%= svg "tabler/outline/alert-triangle", class: "h-6 inline me-2 text-bold shrink-0 me-1" %>
           <div><%= simple_format error %></div>
         </div>
       </div>

data/app/views/avo/partials/_sortable_component.html.erb

@@ -1,12 +1,12 @@
 <%
-  icon = "avo/selector"
+  icon = "tabler/outline/selector"
 
   if params[:sort_by] == field.id.to_s
     case params[:sort_direction]
       when 'asc'
-        icon = "avo/sort-ascending"
+        icon = "tabler/outline/sort-ascending"
       when 'desc'
-        icon = "avo/sort-descending"
+        icon = "tabler/outline/sort-descending"
       end
   end
 %>

data/app/views/avo/partials/_table_header.html.erb

@@ -87,7 +87,7 @@
             class="cursor-pointer <%= text_classes %>"
             data-action="click->toggle#togglePanel"
           >
-            <%= svg 'heroicons/solid/chart-bar', class: 'h-3 ms-1' %>
+            <%= svg 'tabler/filled/chart-pie-4', class: 'h-3 ms-1' %>
           </div>
           <turbo-frame
             id="summary-frame-<%= field.id %>"

data/app/views/avo/private/_links_and_buttons.html.erb

@@ -28,7 +28,7 @@
                   %>
                   <%
                     a_button_or_link = "a_#{entity}"
-                    args = {icon: "heroicons/outline/arrow-left", style: style, color: color, size: size, class: extra_classes, disabled: state == :disabled}
+                    args = {icon: "tabler/outline/arrow-left", style: style, color: color, size: size, class: extra_classes, disabled: state == :disabled}
                   %>
                   <% if entity == :link %>
                     <div>
@@ -43,7 +43,7 @@
                       <% end %>
                     </div>
                     <div>
-                      <%= a_button icon: "avo/bell", style: style, color: color, size: size, class: extra_classes, disabled: state == :disabled %>
+                      <%= a_button icon: "tabler/outline/bell", style: style, color: color, size: size, class: extra_classes, disabled: state == :disabled %>
                     </div>
                   <% end %>
                 <% end %>

data/app/views/avo/private/design.html.erb

@@ -1,19 +1,19 @@
 <div class="flex flex-col">
   <%= render ui.panel(title: 'Welcome to Avo', description: 'This page is visible only in development. It will be hidden in other environments.') do |panel| %>
     <% panel.with_controls do %>
-      <%= a_link('/admin', icon: "heroicons/outline/arrow-left", color: :green, style: :primary, is_link: true) do %>
+      <%= a_link('/admin', icon: "tabler/outline/arrow-left", color: :green, style: :primary, is_link: true) do %>
         Primary
       <% end %>
 
-      <%= a_link('/admin', icon: "heroicons/outline/arrow-left", style: :outline, is_link: true) do %>
+      <%= a_link('/admin', icon: "tabler/outline/arrow-left", style: :outline, is_link: true) do %>
         Outline
       <% end %>
 
-      <%= a_link('/admin', icon: "heroicons/outline/arrow-left", style: :outline, color: :red, is_link: true) do %>
+      <%= a_link('/admin', icon: "tabler/outline/arrow-left", style: :outline, color: :red, is_link: true) do %>
         Red
       <% end %>
 
-      <%= a_link('/admin', icon: "heroicons/outline/arrow-left", style: :text, color: :orange, is_link: true) do %>
+      <%= a_link('/admin', icon: "tabler/outline/arrow-left", style: :text, color: :orange, is_link: true) do %>
         Text
       <% end %>
 

data/app/views/avo/sidebar/_license_warning.html.erb

@@ -1,8 +1,8 @@
 <div class="w-10/12 ms-1/12 inset-auto bottom-0 z-50 my-4 opacity-50 hover:opacity-100 transition-opacity duration-150 group">
   <a href="https://avohq.io/pricing" target="_blank" class="rounded-sm bg-green-700 text-white py-2 px-4 text-sm block group-hover:pt-4">
-    <%= svg "avo/exclamation", class: 'h-6 inline me-1 text-bold' %> <%= title %>
+    <%= svg "tabler/outline/alert-triangle", class: 'h-6 inline me-1 text-bold' %> <%= title %>
     <div class="group-hover:block hidden py-2">
-      <%= message %> <%= svg "avo/arrow-circle-right", class: "h-6 inline float-right" %>
+      <%= message %> <%= svg "tabler/outline/circle-arrow-right", class: "h-6 inline float-right" %>
     </div>
   </a>
 </div>

data/lib/avo/version.rb

@@ -1,3 +1,3 @@
 module Avo
-  VERSION = "4.0.0.beta.2" unless const_defined?(:VERSION)
+  VERSION = "4.0.0.beta.3" unless const_defined?(:VERSION)
 end

data/lib/generators/avo/resource_generator.rb

@@ -341,8 +341,8 @@ module Generators
           event: "tabler/outline/calendar-event",
           notification: "tabler/outline/bell",
           message: "tabler/outline/mail",
-          setting: "tabler/outline/settings",
-          report: "tabler/outline/chart-bar",
+          setting: "heroicons/outline/cog",
+          report: "tabler/filled/chart-pie-4",
           task: "tabler/outline/checklist",
           review: "tabler/outline/star",
           photo: "tabler/outline/photo",
@@ -356,7 +356,7 @@ module Generators
           plan: "tabler/outline/list",
           address: "tabler/outline/map-pin",
           location: "tabler/outline/map-pin",
-          country: "tabler/outline/globe",
+          country: "tabler/outline/world",
           city: "tabler/outline/building-community",
           account: "tabler/outline/user-circle",
         }.freeze

data/lib/generators/avo/templates/initializer/avo.tt

@@ -141,19 +141,19 @@ Avo.configure do |config|
 
   ## == Menus ==
   # config.main_menu = -> {
-  #   section "Dashboards", icon: "avo/dashboards" do
+  #   section "Dashboards", icon: "tabler/outline/layout-dashboard" do
   #     all_dashboards
   #   end
 
-  #   section "Resources", icon: "avo/resources" do
+  #   section "Resources", icon: "tabler/outline/chart-bar-popular" do
   #     all_resources
   #   end
 
-  #   section "Tools", icon: "avo/tools" do
+  #   section "Tools", icon: "tabler/outline/tool" do
   #     all_tools
   #   end
   # }
   # config.profile_menu = -> {
-  #   link "Profile", path: "/<%= options[:path] %>/profile", icon: "heroicons/outline/user-circle"
+  #   link "Profile", path: "/<%= options[:path] %>/profile", icon: "tabler/outline/user-circle"
   # }
 end

data/lib/generators/avo/templates/resource_tools/partial.tt

@@ -1,7 +1,7 @@
 <div class="flex flex-col">
   <%%= render ui.panel(title: "<%= human_name %>") do |panel| %>
     <%% panel.with_controls do %>
-      <%%= a_link('/avo', icon: 'heroicons/solid/academic-cap', color: :primary, style: :primary) do %>
+      <%%= a_link('/avo', icon: 'tabler/outline/school', color: :primary, style: :primary) do %>
         Dummy link
       <%% end %>
     <%% end %>