avo 3.17.7 → 3.17.8.tw4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5d37cac842e01c924da20b541aae0072dac630d725d61faa4760d3b90d077ae5
-  data.tar.gz: 1838971f0c60d36aa7d47457f4e394c9106afdd5442a930c14a39e3425d908f1
+  metadata.gz: 0b344c17102d762da2cca42fb630de9d14ed6432c975c121c4eca092ebb8b4f1
+  data.tar.gz: b1133d726f7d426ae61cba79178e21dabeaab1ed0217e56cf609bed38a57d75f
 SHA512:
-  metadata.gz: d1a371f602937cb5b3146d13e12dcef3a3a0d4f84db2f5e7691c28c1b5f5c83573c385e1d2ce27e359c388dbaef077c0702cd96c6674752ff069b09e071c6f69
-  data.tar.gz: 3cb0dc6ff3b544fa46a67cce144beadb2451b91acc9dfb936257b464b6bcf81dc2dabea079d4359c8db84725a8da18823957b2f32e5b179ffbfcca035fad5254
+  metadata.gz: ec28e7756c1867d33cc62756116c2b52d18f974c3a8e2df5c4cc0fa50afb4d32e74d7bca8e076b2e8a5000d441c59ed09aed0926b23d5ceae39a7bd614542c5d
+  data.tar.gz: 410504cfa26735e995573977730582dd2cea684447a476da142649be5215c8ff61bd090a6435657ed447cdb7f78c8914b4a65d83bd47ca92dc04f71a32c2d046

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (3.17.7)
+    avo (3.17.8.tw4)
       actionview (>= 6.1)
       active_link_to
       activerecord (>= 6.1)
@@ -129,18 +129,18 @@ GEM
     avo-money_field (0.0.5)
       money-rails (~> 1.12)
     avo-record_link_field (0.0.2)
-    aws-eventstream (1.3.0)
-    aws-partitions (1.1050.0)
-    aws-sdk-core (3.218.1)
+    aws-eventstream (1.3.1)
+    aws-partitions (1.1052.0)
+    aws-sdk-core (3.219.0)
       aws-eventstream (~> 1, >= 1.3.0)
       aws-partitions (~> 1, >= 1.992.0)
       aws-sigv4 (~> 1.9)
       base64
       jmespath (~> 1, >= 1.6.1)
-    aws-sdk-kms (1.98.0)
+    aws-sdk-kms (1.99.0)
       aws-sdk-core (~> 3, >= 3.216.0)
       aws-sigv4 (~> 1.5)
-    aws-sdk-s3 (1.180.0)
+    aws-sdk-s3 (1.182.0)
       aws-sdk-core (~> 3, >= 3.216.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.5)
@@ -178,7 +178,7 @@ GEM
       rack-test (>= 0.6.3)
       regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
-    chartkick (5.1.3)
+    chartkick (5.1.4)
     childprocess (5.1.0)
       logger (~> 1.5)
     coercible (1.0.0)
@@ -376,7 +376,7 @@ GEM
     listen (3.9.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    logger (1.6.5)
+    logger (1.6.6)
     loofah (2.24.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
@@ -422,9 +422,9 @@ GEM
     net-smtp (0.5.1)
       net-protocol
     nio4r (2.7.4)
-    nokogiri (1.18.2-arm64-darwin)
+    nokogiri (1.18.3-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.2-x86_64-linux-gnu)
+    nokogiri (1.18.3-x86_64-linux-gnu)
       racc (~> 1.4)
     observer (0.1.2)
     orm_adapter (0.5.0)
@@ -527,7 +527,7 @@ GEM
       railties (>= 5.2)
     reverse_markdown (3.0.0)
       nokogiri
-    rexml (3.4.0)
+    rexml (3.4.1)
     ripper-tags (1.0.2)
     rspec-core (3.13.3)
       rspec-support (~> 3.13.0)
@@ -645,7 +645,7 @@ GEM
     standard-performance (1.6.0)
       lint_roller (~> 1.1)
       rubocop-performance (~> 1.23.0)
-    stringio (3.1.2)
+    stringio (3.1.3)
     syntax_tree (6.2.0)
       prettier_print (>= 1.2.0)
     terminal-table (4.0.0)
@@ -696,7 +696,7 @@ GEM
     xpath (3.2.0)
       nokogiri (~> 1.8)
     yard (0.9.37)
-    zeitwerk (2.7.1)
+    zeitwerk (2.7.2)
 
 PLATFORMS
   arm64-darwin-23
@@ -787,4 +787,4 @@ DEPENDENCIES
   zeitwerk
 
 BUNDLED WITH
-   2.5.9
+   2.5.22

data/README.md

@@ -125,5 +125,6 @@ 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 './../../../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;
-}
+@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;
+  }
 
-.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;
+  dl {
+    @apply text-sm;
 
-  dt {
-    @apply font-bold inline-block mt-1;
-  }
+    dt {
+      @apply font-bold inline-block mt-1;
+    }
 
-  dd {
-    @apply inline-block ml-0;
+    dd {
+      @apply inline-block ml-0;
+    }
   }
-}
 
-/* 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;
+  .shift-pressed {
+    & .highlighted-row {
+      @apply !bg-neutral-200;
+    }
   }
-}
 
-.shift-pressed {
-  & .highlighted-row {
-    @apply !bg-neutral-200;
+  .selected-row {
+    @apply !bg-neutral-100;
   }
 }
-
-.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 shadow-inner;
+  @apply h-2 bg-white border border-slate-400 rounded-sm shadow-inner;
 }
 progress[value]::-webkit-progress-bar {
-  @apply bg-white border border-gray-500 rounded shadow-inner;
+  @apply bg-white border border-gray-500 rounded-sm shadow-inner;
 }
 progress[value]::-webkit-progress-value{
-  @apply bg-primary-500 rounded;
+  @apply bg-primary-500 rounded-sm;
 
 }
 progress[value]::-moz-progress-bar {
-  @apply bg-primary-500 rounded appearance-none;
+  @apply bg-primary-500 rounded-sm appearance-none;
 }

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

@@ -1,7 +1,7 @@
 /* EDIT STYLES */
 
 .tiptap {
-  @apply m-0 p-4 outline-none min-h-44;
+  @apply m-0 p-4 outline-hidden min-h-44;
 
   >*+* {
     @apply mt-4;
@@ -22,7 +22,7 @@
 }
 
 .tiptap__field {
-  @apply w-full mb-4 border border-gray-200 rounded;
+  @apply w-full mb-4 border border-gray-200 rounded-sm;
 }
 
 .tiptap__editor {
@@ -54,7 +54,7 @@
 }
 
 .tiptap__button {
-  @apply p-1 text-gray-500 rounded cursor-pointer;
+  @apply p-1 text-gray-500 rounded-sm 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;
+  @apply text-sm mr-2 py-1 border border-gray-200 rounded-sm;
 }
 
 /* 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 px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300;
+    @apply rounded-sm 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 px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300;
+      @apply block rounded-sm 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 border-gray-300 h-[34px];
+    @apply rounded-sm border-gray-300 h-[34px];
   }
 }
 
@@ -37,11 +37,11 @@
 
 .aa-Form {
   &:focus-within {
-    @apply ring-0 !important;
+    @apply ring-0;
   }
 
   input {
-    @apply focus:ring-0 !important;
+    @apply focus:ring-0;
   }
   &:focus-within {
     .aa-InputWrapperPrefix{
@@ -71,7 +71,7 @@ button.aa-DetachedCancelButton {
       @apply space-y-2;
 
       .aa-Item {
-        @apply bg-white rounded px-3 py-4 shadow font-medium;
+        @apply bg-white rounded-sm px-3 py-4 shadow font-medium;
 
         .aa-ItemDescription {
           @apply text-gray-500 text-sm font-normal mt-1;

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 text-xs;
+  @apply bg-white text-gray-700 px-3 py-0 rounded-sm 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-none",
+    class: "focus:outline-hidden",
     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 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-sm 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">
+    <div data-target="actions-list" class="w-full space divide-y divide-gray-200">
       <% @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 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">
+      <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">
           <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 rounded px-4 py-3 rounded relative border text-white pointer-events-auto"
+    result = "max-w-lg w-full shadow-lg px-4 py-3 rounded-sm 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 relative border text-white pointer-events-auto bg-red-400 border-red-600"
+  class="w-full shadow-lg px-4 py-3 rounded-sm 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 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">
+      <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">
           <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 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 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 active:outline active:outline-1" unless is_icon?
+    classes += " border border-gray-200 active:outline active:outline-1" unless is_icon?
 
-    classes += " rounded" if @rounded.present?
+    classes += " rounded-sm" 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-2 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 border-gray-200 border-solid" data-component-name="<%= self.class.to_s.underscore %>">
   <% if @label.present? %>
-    <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">
+    <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">
       <%= @label %>
     </div>
   <% end %>

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

@@ -1,5 +1,5 @@
 <% if @add_background %>
-  <div class="bg-white rounded shadow-panel">
+  <div class="bg-white rounded-sm 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 flex-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 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"
+  <div class="divide-y divide-gray-200"
       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 #{@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-sm #{@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 checked:bg-primary-400 focus:checked:!bg-primary-400" \
+    @classes = "w-4 h-4 rounded-sm 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 flex-shrink-0">
+        <p class="items-center h-full p-2 shrink-0">
           <%= file.filename %>
         </p>
       </div>
-      <div class="text-gray-700 flex-shrink-0 text-sm">
+      <div class="text-gray-700 shrink-0 text-sm">
         <%= helpers.number_to_human_size(file.byte_size) %>
       </div>
-      <div class="flex space-x-2 justify-end col-span-1 flex-shrink-0">
+      <div class="flex space-x-2 justify-end col-span-1 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 overflow-hidden"
+<div class="w-full shadow-lg rounded-sm 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 overflow-hidden">
-        <div class="w-1/2 py-3 px-3 uppercase font-semibold text-xs text-white border-gray-600 border-r">
+      <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">
           <%= @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: "block min-w-[6rem] #{"w-full" if show?} #{"w-auto" if index?}" %>
+  <%= tag :progress, min: 0, max: @max, value: @value, class: class_names("block min-w-[6rem]", "w-full": show?, "w-auto": index?) %>
 </div>