avo 3.18.0.tw4 → 3.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1aea42b83fc1477673c6145e559491012f105be179322859fab4d545db6b21e2
-  data.tar.gz: 95d5f3232c84176f5289bc5c0dcb6fe6b45f2c83b9b4b4c3c2a80199a3849754
+  metadata.gz: a021dc75388114b43557b2147c1a869dafa785702a1fef76a6e46bac6acd5438
+  data.tar.gz: b5bbdc0eed70c1f0042ca4ffd12b1b3fc54a9d7a01f4de35de12ecb012a031c8
 SHA512:
-  metadata.gz: 1847cf4c9228f7f7b2b594c263c54807a34d8308bc92a3d77e4f895b8d12ee3f76596e13e297cc767ca1cbaaf67008b7eb4016f52ba56ad80eccd86d77a91428
-  data.tar.gz: dd0492356702a17932ba1fd60d4f045435f91de7aaf5c66908d7f97a994222d446358b1dcf06cebc2e3eff49d3677be206c0b5050fc129c0f733a4ab5db3a868
+  metadata.gz: 7b5685d03a6f07dbe2d011a17c1817c4b179d4aacaebcd9aa1e0ec1a6d3fa4d6ce21da0a77cde5cc0b09527b4e16cd6223ae447ca4c4112e93ece3f464a6ba56
+  data.tar.gz: a2f8fbab85b71d87e31ddae2eaa5f095f09288ad4ca4b587e1ef329130efa091346fa2ef2b769eb3c6e669eb68c6239ff8d46920474a10701c3f0da0a495069a

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (3.18.0.tw4)
+    avo (3.18.0)
       actionview (>= 6.1)
       active_link_to
       activerecord (>= 6.1)
@@ -293,6 +293,7 @@ GEM
       concurrent-ruby (~> 1.1)
       webrick (~> 1.7)
       websocket-driver (~> 0.7)
+    ffi (1.17.1-arm64-darwin)
     ffi (1.17.1-x86_64-linux-gnu)
     flay (2.13.3)
       erubi (~> 1.10)
@@ -421,6 +422,8 @@ GEM
     net-smtp (0.5.1)
       net-protocol
     nio4r (2.7.4)
+    nokogiri (1.18.3-arm64-darwin)
+      racc (~> 1.4)
     nokogiri (1.18.3-x86_64-linux-gnu)
       racc (~> 1.4)
     observer (0.1.2)
@@ -696,6 +699,8 @@ GEM
     zeitwerk (2.7.2)
 
 PLATFORMS
+  arm64-darwin-23
+  arm64-darwin-24
   x86_64-linux
 
 DEPENDENCIES
@@ -783,4 +788,4 @@ DEPENDENCIES
   zeitwerk
 
 BUNDLED WITH
-   2.6.3
+   2.5.9

data/README.md

@@ -125,6 +125,5 @@ Please read the [RELEASE.MD](./RELEASE.MD)
 
  - [`active_storage-blurhash`](https://github.com/avo-hq/active_storage-blurhash) - A plug-n-play [blurhash](https://blurha.sh/) integration for images stored in ActiveStorage
  - [`class_variants`](https://github.com/avo-hq/class_variants) - Easily configure styles and apply them as classes. Very useful when you're implementing Tailwind CSS components and call them with different states.
- - [`marksmith`](https://github.com/avo-hq/marksmith) - GitHub-style markdown editor for Ruby on Rails with ActiveStorage support.
  - [`prop_initializer`](https://github.com/avo-hq/prop_initializer) - A flexible tool for defining properties on Ruby classes.
  - [`stimulus-confetti`](https://github.com/avo-hq/stimulus-confetti) - The easiest way to add confetti to your StimulusJS app

data/app/assets/stylesheets/avo.base.css

@@ -1,124 +1,124 @@
-@import "tailwindcss";
-
-/* Figure out a way to add those dynamically */
-@source "../../../tmp/avo/packages/avo-advanced";
-@source "../../../tmp/avo/packages/avo-dashboards";
-@source "../../../tmp/avo/packages/avo-dynamic_filters";
-@source "../../../tmp/avo/packages/avo-kanban";
-@source "../../../tmp/avo/packages/avo-menu";
-@source "../../../tmp/avo/packages/avo-pro";
-
-@config "../../../tailwind.config.js";
-
-@layer components {
-  @import './../../../node_modules/easymde/dist/easymde.min.css';
-  @import './../../../node_modules/tippy.js/dist/tippy.css';
-  @import './../../../node_modules/tippy.js/themes/light.css';
-  @import './../../../node_modules/flatpickr/dist/flatpickr.css';
-  @import './../../../node_modules/@algolia/autocomplete-theme-classic/dist/theme.css';
-  @import './../../../node_modules/@yaireo/tagify/dist/tagify.css';
-
-  @import './css/fonts.css';
-  @import './css/buttons.css';
-  @import './css/typography.css';
-  @import './css/tooltips.css';
-  @import './css/loader.css';
-  @import './css/pagination.css';
-  @import './css/breadcrumbs.css';
-  @import './css/search.css';
-  @import './css/active-storage.css';
-  @import './css/scrollbar.css';
-  @import './css/sidebar.css';
-  @import './css/spinner.css';
-
-  @import './css/fields/status.css';
-  @import './css/fields/code.css';
-  @import './css/fields/progress.css';
-  @import './css/fields/trix.css';
-  @import './css/fields/tags.css';
-  @import './css/fields/tiptap.css';
-
-  html,
-  body {
-    @apply antialiased relative h-full;
-  }
+@import './../../../node_modules/easymde/dist/easymde.min.css';
+@import './../../../node_modules/tippy.js/dist/tippy.css';
+@import './../../../node_modules/tippy.js/themes/light.css';
+@import './../../../node_modules/flatpickr/dist/flatpickr.css';
+@import './../../../node_modules/@algolia/autocomplete-theme-classic/dist/theme.css';
+@import './../../../node_modules/@yaireo/tagify/dist/tagify.css';
+
+@import 'tailwindcss/base';
+
+@import './css/fonts.css';
+@import './css/buttons.css';
+@import './css/typography.css';
+@import './css/tooltips.css';
+@import './css/loader.css';
+@import './css/pagination.css';
+@import './css/breadcrumbs.css';
+@import './css/search.css';
+@import './css/active-storage.css';
+@import './css/scrollbar.css';
+@import './css/sidebar.css';
+@import './css/spinner.css';
+
+@import './css/fields/status.css';
+@import './css/fields/code.css';
+@import './css/fields/progress.css';
+@import './css/fields/trix.css';
+@import './css/fields/tags.css';
+@import './css/fields/tiptap.css';
+
+@import 'tailwindcss/components';
+
+@import 'tailwindcss/utilities';
+
+html,
+body {
+  @apply antialiased relative h-full;
+}
 
-  .will-change-transform {
-    will-change: transform;
-  }
+.will-change-transform {
+  will-change: transform;
+}
 
-  .fade-enter-active,
-  .fade-leave-active {
-    will-change: opacity;
-    will-change: transform;
+.fade-enter-active,
+.fade-leave-active {
+  will-change: opacity;
+  will-change: transform;
 
-    @apply transition transform duration-150;
-  }
+  @apply transition transform duration-150;
+}
 
-  .fade-enter-active {
-    @apply relative ease-out delay-150;
-  }
+.fade-enter-active {
+  @apply relative ease-out delay-150;
+}
 
-  .fade-leave-active {
-    @apply relative ease-in;
-  }
+.fade-leave-active {
+  @apply relative ease-in;
+}
 
-  .fade-enter {
-    @apply delay-150 opacity-0 -translate-y-1;
-  }
+.fade-enter {
+  @apply delay-150 opacity-0 -translate-y-1;
+}
 
-  .fade-enter-to {
-    @apply  delay-150 opacity-100 translate-y-0;
-  }
+.fade-enter-to {
+  @apply  delay-150 opacity-100 translate-y-0;
+}
 
-  .fade-leave {
-    @apply opacity-100 translate-y-0;
-  }
+.fade-leave {
+  @apply opacity-100 translate-y-0;
+}
 
-  .fade-leave-to {
-    @apply opacity-0 translate-y-1;
-  }
+.fade-leave-to {
+  @apply opacity-0 translate-y-1;
+}
 
-  .turbo-progress-bar {
-    @apply bg-primary-400;
-  }
+.turbo-progress-bar {
+  @apply bg-primary-400;
+}
 
-  body.os-mac .mac\:hidden {
-    display: none;
-  }
+body.os-mac .mac\:hidden {
+  display: none;
+}
 
-  body.os-pc .pc\:hidden {
-    display: none;
-  }
+body.os-pc .pc\:hidden {
+  display: none;
+}
 
-  trix-editor {
-    max-height: 320px !important;
-    overflow-y: auto;
-  }
+trix-editor {
+  max-height: 320px !important;
+  overflow-y: auto;
+}
 
-  dialog#turbo-confirm {
-    @apply bg-transparent;
-  }
+dialog#turbo-confirm {
+  @apply bg-transparent;
+}
 
-  dl {
-    @apply text-sm grid gap-x-2 grid-cols-[max-content_1fr];
+dl {
+  @apply text-sm grid gap-x-2 grid-cols-[max-content_1fr];
 
-    dt {
-      @apply font-bold mt-1;
-    }
+  dt {
+    @apply font-bold mt-1;
+  }
 
-    dd {
-      @apply ml-0 col-start-2;
-    }
+  dd {
+    @apply ml-0 col-start-2;
   }
+}
 
-  .shift-pressed {
-    & .highlighted-row {
-      @apply !bg-neutral-200;
-    }
+/* TODO: make content like tailwindcss */
+.floating-row-controls {
+  &:before {
+    content: "";
+    @apply absolute z-10 inset-auto left-0 top-0 mt-0 -translate-x-full w-3 h-full bg-gradient-to-l from-white to-transparent group-hover:from-gray-50;
   }
+}
 
-  .selected-row {
-    @apply !bg-neutral-100;
+.shift-pressed {
+  & .highlighted-row {
+    @apply !bg-neutral-200;
   }
 }
+
+.selected-row {
+  @apply !bg-neutral-100;
+}

data/app/assets/stylesheets/css/fields/progress.css

@@ -1,13 +1,13 @@
 progress {
-  @apply h-2 bg-white border border-slate-400 rounded-sm shadow-inner;
+  @apply h-2 bg-white border border-slate-400 rounded shadow-inner;
 }
 progress[value]::-webkit-progress-bar {
-  @apply bg-white border border-gray-500 rounded-sm shadow-inner;
+  @apply bg-white border border-gray-500 rounded shadow-inner;
 }
 progress[value]::-webkit-progress-value{
-  @apply bg-primary-500 rounded-sm;
+  @apply bg-primary-500 rounded;
 
 }
 progress[value]::-moz-progress-bar {
-  @apply bg-primary-500 rounded-sm appearance-none;
+  @apply bg-primary-500 rounded appearance-none;
 }

data/app/assets/stylesheets/css/fields/tiptap.css

@@ -1,7 +1,7 @@
 /* EDIT STYLES */
 
 .tiptap {
-  @apply m-0 p-4 outline-hidden min-h-44;
+  @apply m-0 p-4 outline-none min-h-44;
 
   >*+* {
     @apply mt-4;
@@ -22,7 +22,7 @@
 }
 
 .tiptap__field {
-  @apply w-full mb-4 border border-gray-200 rounded-sm;
+  @apply w-full mb-4 border border-gray-200 rounded;
 }
 
 .tiptap__editor {
@@ -54,7 +54,7 @@
 }
 
 .tiptap__button {
-  @apply p-1 text-gray-500 rounded-sm cursor-pointer;
+  @apply p-1 text-gray-500 rounded cursor-pointer;
 
   &:hover:enabled {
     @apply bg-gray-100;
@@ -94,7 +94,7 @@
 }
 
 .tiptap__link-field {
-  @apply text-sm mr-2 py-1 border border-gray-200 rounded-sm;
+  @apply text-sm mr-2 py-1 border border-gray-200 rounded;
 }
 
 /* SHOW STYLES */

data/app/assets/stylesheets/css/pagination.css

@@ -22,7 +22,7 @@
   .pagy-nav-js .page a,
   .pagy-combo-nav-js .page a,
   .pagy-combo-nav-js .pagy-combo-input a {
-    @apply rounded-sm px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300;
+    @apply rounded px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300;
 
     &:hover{
       @apply bg-gray-150;
@@ -73,7 +73,7 @@
     }
 
     & a:not(.gap) {
-      @apply block rounded-sm px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300;
+      @apply block rounded px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300;
 
       &:hover{
         @apply bg-gray-150;

data/app/assets/stylesheets/css/search.css

@@ -22,7 +22,7 @@
   }
 
   .aa-DetachedSearchButton {
-    @apply rounded-sm border-gray-300 h-[34px];
+    @apply rounded border-gray-300 h-[34px];
   }
 }
 
@@ -37,11 +37,11 @@
 
 .aa-Form {
   &:focus-within {
-    @apply ring-0;
+    @apply ring-0 !important;
   }
 
   input {
-    @apply focus:ring-0;
+    @apply focus:ring-0 !important;
   }
   &:focus-within {
     .aa-InputWrapperPrefix{
@@ -71,7 +71,7 @@ button.aa-DetachedCancelButton {
       @apply space-y-2;
 
       .aa-Item {
-        @apply bg-white rounded-sm px-3 py-4 shadow font-medium;
+        @apply bg-white rounded px-3 py-4 shadow font-medium;
 
         .aa-ItemDescription {
           @apply text-gray-500 text-sm font-normal mt-1;

data/app/assets/stylesheets/css/tailwindcss/base.css

@@ -0,0 +1 @@
+@tailwind base;

data/app/assets/stylesheets/css/tailwindcss/components.css

@@ -0,0 +1 @@
+@tailwind components;

data/app/assets/stylesheets/css/tailwindcss/utilities.css

@@ -0,0 +1 @@
+@tailwind utilities;

data/app/assets/stylesheets/css/tooltips.css

@@ -7,7 +7,7 @@
   display: block;
   filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
 
-  @apply bg-white text-gray-700 px-3 py-0 rounded-sm text-xs;
+  @apply bg-white text-gray-700 px-3 py-0 rounded text-xs;
 }
 
 .tooltip .tooltip-arrow {

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

@@ -10,7 +10,7 @@
     type: :button,
     color: @color,
     size: @size,
-    class: "focus:outline-hidden",
+    class: "focus:outline-none",
     icon: @icon,
     data: {
       action: "click->toggle#togglePanel",
@@ -21,7 +21,7 @@
     <%= @label %>
   <% end %>
   <div
-    class="absolute flex inset-auto xl:right-0 top-full bg-white w-full sm:w-auto sm:min-w-[300px] mt-2 z-40 shadow-modal rounded-sm overflow-hidden hidden"
+    class="absolute flex inset-auto xl:right-0 top-full bg-white w-full sm:w-auto sm:min-w-[300px] mt-2 z-40 shadow-modal rounded overflow-hidden hidden"
     data-toggle-target="panel"
     data-controller="actions-overflow"
     data-actions-overflow-panel-list-value="<%= !@as_row_control %>"
@@ -33,7 +33,7 @@
     data-transition-leave-start="transform opacity-100 translate-y-0"
     data-transition-leave-end="transform opacity-0 -translate-y-1"
   >
-    <div data-target="actions-list" class="w-full space divide-y divide-gray-200">
+    <div data-target="actions-list" class="w-full space divide-y">
       <% @actions.each do |action| %>
         <%= render_item(action)%>
       <% end %>

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

@@ -13,8 +13,8 @@
           <%= sanitize @message.to_s %>
         </p>
       </div>
-      <div class="ml-4 shrink-0 flex items-center">
-        <button data-action="alert#close" class="inline-flex text-white focus:outline-hidden focus:text-gray-300 transition ease-in-out duration-150">
+      <div class="ml-4 flex-shrink-0 flex items-center">
+        <button data-action="alert#close" class="inline-flex text-white focus:outline-none focus:text-gray-300 transition ease-in-out duration-150">
           <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
           </svg>

data/app/components/avo/alert_component.rb

@@ -18,7 +18,7 @@ class Avo::AlertComponent < Avo::BaseComponent
   def classes
     return "hidden" if is_empty?
 
-    result = "max-w-lg w-full shadow-lg px-4 py-3 rounded-sm relative border text-white pointer-events-auto"
+    result = "max-w-lg w-full shadow-lg rounded px-4 py-3 rounded relative border text-white pointer-events-auto"
 
     result += if is_error?
       " bg-red-400 border-red-600"

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

@@ -1,7 +1,7 @@
 <div data-controller="alert"
   data-alert-dismiss-after-value="<%= Avo.configuration.alert_dismiss_time %>"
   data-alert-remove-delay-value="0"
-  class="w-full shadow-lg px-4 py-3 rounded-sm relative border text-white pointer-events-auto bg-red-400 border-red-600"
+  class="w-full shadow-lg px-4 py-3 rounded relative border text-white pointer-events-auto bg-red-400 border-red-600"
 >
   <div class="px-2">
     <div class="flex h-full">
@@ -14,8 +14,8 @@
           <pre class='overflow-y-scroll max-h-64 whitespace-pre-wrap text-xs'><%= @backtrace.join("\n") %></pre>
         </p>
       </div>
-      <div class="ml-4 shrink-0 flex items-center">
-        <button data-action="alert#close" class="inline-flex text-white focus:outline-hidden focus:text-gray-300 transition ease-in-out duration-150">
+      <div class="ml-4 flex-shrink-0 flex items-center">
+        <button data-action="alert#close" class="inline-flex text-white focus:outline-none focus:text-gray-300 transition ease-in-out duration-150">
           <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
           </svg>

data/app/components/avo/button_component.rb

@@ -34,12 +34,12 @@ class Avo::ButtonComponent < Avo::BaseComponent
   end
 
   def button_classes
-    classes = "button-component inline-flex grow-0 items-center font-semibold leading-6 fill-current whitespace-nowrap transition duration-100 transform transition duration-100 cursor-pointer disabled:cursor-not-allowed disabled:opacity-60 data-[disabled='true']:opacity-60 justify-center #{@class}"
+    classes = "button-component inline-flex flex-grow-0 items-center font-semibold leading-6 fill-current whitespace-nowrap transition duration-100 transform transition duration-100 cursor-pointer disabled:cursor-not-allowed disabled:opacity-60 data-[disabled='true']:opacity-60 justify-center #{@class}"
 
     # For non-icon-styled buttons we should not add borders.
-    classes += " border border-gray-200 active:outline active:outline-1" unless is_icon?
+    classes += " border active:outline active:outline-1" unless is_icon?
 
-    classes += " rounded-sm" if @rounded.present?
+    classes += " rounded" if @rounded.present?
     classes += style_classes
     classes += horizontal_padding_classes
     classes += vertical_padding_classes

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

@@ -1,6 +1,6 @@
-<div class="relative flex justify-center items-center w-full !border-b border-gray-200 border-solid" data-component-name="<%= self.class.to_s.underscore %>">
+<div class="relative flex justify-center items-center w-full !border-b-2 border-gray-200 border-solid" data-component-name="<%= self.class.to_s.underscore %>">
   <% if @label.present? %>
-    <div class="absolute inset-auto z-20 text-[11px] font-semibold uppercase leading-none text-gray-500 bg-white border border-gray-200 px-2 py-1 rounded-sm">
+    <div class="absolute inset-auto z-20 text-xs font-semibold uppercase leading-none text-gray-500 bg-white px-2 border py-1 rounded">
       <%= @label %>
     </div>
   <% end %>

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

@@ -1,5 +1,5 @@
 <% if @add_background %>
-  <div class="bg-white rounded-sm shadow-panel">
+  <div class="bg-white rounded shadow-panel">
 <% end %>
 <div class="relative flex-1 flex flex-col items-center justify-center space-y-12 py-24">
   <%= helpers.svg view_type_svg, class: 'h-[250px]' %>

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

@@ -2,7 +2,7 @@
   class: classes,
   style: style,
   data: data do %>
-  <%= content_tag :div, class: class_names("pt-4 flex self-start items-center shrink-0 w-48 px-6 uppercase font-semibold text-gray-500 text-sm", @field.get_html(:classes, view: @view, element: :label), {
+  <%= content_tag :div, class: class_names("pt-4 flex self-start items-center flex-shrink-0 w-48 px-6 uppercase font-semibold text-gray-500 text-sm", @field.get_html(:classes, view: @view, element: :label), {
     "md:pt-4 md:w-full": stacked?,
     "h-full md:pt-0": !stacked?,
     "md:h-10 ": !stacked? && short?,

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

@@ -1,5 +1,5 @@
 <% if is_polymorphic? %>
-  <div class="divide-y divide-gray-200"
+  <div class="divide-y"
       data-controller="belongs-to-field"
       data-searchable="<%= @field.is_searchable? %>"
       data-association="<%= @field.id %>"

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

@@ -3,7 +3,7 @@
     <%= @form.check_box @field.id,
       value: @field.value,
       checked: @field.value,
-      class: "text-lg h-4 w-4 checked:bg-primary-400 focus:checked:!bg-primary-400 rounded-sm #{@field.get_html(:classes, view: view, element: :input)}",
+      class: "text-lg h-4 w-4 checked:bg-primary-400 focus:checked:!bg-primary-400 rounded #{@field.get_html(:classes, view: view, element: :input)}",
       data: @field.get_html(:data, view: view, element: :input),
       disabled: disabled?,
       autofocus: @autofocus,

data/app/components/avo/fields/boolean_group_field/edit_component.rb

@@ -5,7 +5,7 @@ class Avo::Fields::BooleanGroupField::EditComponent < Avo::Fields::EditComponent
     super(...)
 
     # Initialize here to avoid multiple calls to @field.get_html for each option.
-    @classes = "w-4 h-4 rounded-sm checked:bg-primary-400 focus:checked:!bg-primary-400" \
+    @classes = "w-4 h-4 rounded checked:bg-primary-400 focus:checked:!bg-primary-400" \
       "#{@field.get_html(:classes, view: view, element: :input)}"
     @data = @field.get_html(:data, view: view, element: :input)
     @style = @field.get_html(:style, view: view, element: :input)

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

@@ -5,14 +5,14 @@
         <div class="rounded-full bg-slate-100 border border-gray-500 p-1.5 flex items-center justify-center">
           <%= helpers.svg icon_for_file, class: "h-5 text-gray-600" %>
         </div>
-        <p class="items-center h-full p-2 shrink-0">
+        <p class="items-center h-full p-2 flex-shrink-0">
           <%= file.filename %>
         </p>
       </div>
-      <div class="text-gray-700 shrink-0 text-sm">
+      <div class="text-gray-700 flex-shrink-0 text-sm">
         <%= helpers.number_to_human_size(file.byte_size) %>
       </div>
-      <div class="flex space-x-2 justify-end col-span-1 shrink-0">
+      <div class="flex space-x-2 justify-end col-span-1 flex-shrink-0">
         <%= render Avo::Fields::Common::Files::ControlsComponent.new(field: @field, file: file, resource: @resource) %>
       </div>
     </div>

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

@@ -1,4 +1,4 @@
-<div class="w-full shadow-lg rounded-sm overflow-hidden"
+<div class="w-full shadow-lg rounded overflow-hidden"
   data-controller="key-value"
   data-key-value-target="controller"
   data-options="<%= @field.options.to_json %>"
@@ -7,8 +7,8 @@
 >
   <div class="w-full flex flex-col">
     <div class="flex w-full">
-      <div class="flex w-full bg-gray-700 shadow-sm overflow-hidden">
-        <div class="w-1/2 py-3 px-3 uppercase font-semibold text-xs text-white border-gray-600 border-r border-gray-200">
+      <div class="flex w-full bg-gray-700 shadow overflow-hidden">
+        <div class="w-1/2 py-3 px-3 uppercase font-semibold text-xs text-white border-gray-600 border-r">
           <%= @field.key_label %>
         </div>
         <div class="w-1/2 py-3 px-3 uppercase font-semibold text-xs text-white">

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

@@ -4,5 +4,5 @@
       <%= @value %><%= @value_suffix if @value_suffix.present? %>
     </div>
   <% end %>
-  <%= tag :progress, min: 0, max: @max, value: @value, class: class_names("block min-w-[6rem]", "w-full": show?, "w-auto": index?) %>
+  <%= tag :progress, min: 0, max: @max, value: @value, class: "block min-w-[6rem] #{"w-full" if show?} #{"w-auto" if index?}" %>
 </div>

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

@@ -1,4 +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') %>">
+<%
+  classes = "inline-block"
+  classes += " text-red-600" if @status == 'failed'
+  classes += " text-green-600" if @status == 'success'
+  classes += " text-gray-600" if @status == 'neutral'
+%>
+<div class="flex flex-shrink-0 <%= classes %> items-center">
   <% if @status == 'success' %>
     <%= helpers.svg 'heroicons/solid/check-circle', class: 'h-4' %>
   <% elsif @status == 'failed' %>

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

@@ -12,7 +12,7 @@
   } do %>
     <%= @form.text_field @field.id,
       value: @field.edit_formatted_value,
-      class: classes("w-full #{"!hidden" unless params[:avo_show_hidden_inputs]}"),
+      class: classes("w-full #{"hidden" unless params[:avo_show_hidden_inputs]}"),
       data: {
         'date-field-target': 'input',
         placeholder: @field.placeholder,

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

@@ -14,7 +14,7 @@
   } do %>
     <%= @form.text_field @field.id,
       value: @field.edit_formatted_value,
-      class: classes("w-full #{"!hidden" unless params[:avo_show_hidden_inputs]}"),
+      class: classes("w-full #{"hidden" unless params[:avo_show_hidden_inputs]}"),
       data: {
         date_field_target: :input,
         placeholder: @field.placeholder,