spree_admin 5.2.6 → 5.3.0.rc1

data/app/assets/tailwind/spree/admin/index.css

@@ -0,0 +1,73 @@
+@import url("https://unpkg.com/trix@2.1.12/dist/trix.css");
+@import url("https://esm.sh/@uppy/core@4.2.0/dist/style.min.css");
+@import url("https://esm.sh/@uppy/dashboard@4.1.0/dist/style.min.css");
+@import url("https://esm.sh/@uppy/image-editor@3.1.0/dist/style.min.css");
+@import url("https://esm.sh/@simonwep/pickr@1.8.2/dist/themes/classic.min.css");
+@import url("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css");
+@import url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.31.0/dist/tabler-icons.min.css");
+
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+@plugin "@tailwindcss/forms" {
+  strategy: "base";
+}
+@plugin "@tailwindcss/aspect-ratio";
+
+/* Content sources for class detection */
+@source "../../../../views/**/*.erb";
+@source "../../../../helpers/**/*.rb";
+@source "../../../../javascript/**/*.js";
+@source "./**/*.css";
+
+/* Page Builder sources (optional - no matches if page_builder gem not present) */
+@source "../../../../../../page_builder/app/views/**/*.erb";
+@source "../../../../../../page_builder/app/helpers/**/*.rb";
+@source "../../../../../../page_builder/app/javascript/**/*.js";
+
+/* Base */
+@import "./base/_theme.css";
+@import "./base/_base.css";
+@import "./base/_utilities.css";
+@import "./base/_animations.css";
+
+/* Utilities */
+@import "./utilities/_bootstrap.css";
+
+/* Components - Core */
+@import "./components/_forms.css";
+@import "./components/_buttons.css";
+@import "./components/_cards.css";
+@import "./components/_badges.css";
+@import "./components/_alerts.css";
+@import "./components/_tables.css";
+@import "./components/_dialogs.css";
+@import "./components/_navigation.css";
+@import "./components/_dropdowns.css";
+@import "./components/_list-groups.css";
+@import "./components/_tooltips.css";
+@import "./components/_breadcrumbs.css";
+@import "./components/_progress.css";
+@import "./components/_misc.css";
+
+/* Components - Layout */
+@import "./components/_layout.css";
+@import "./components/_filters.css";
+@import "./components/_search-picker.css";
+@import "./components/_sortable-tree.css";
+@import "./components/_bulk-panel.css";
+@import "./components/_variants-form.css";
+@import "./components/_media-form.css";
+@import "./components/_seo-form.css";
+@import "./components/_line-items.css";
+@import "./components/_bulk-editor.css";
+
+/* Views */
+@import "./views/_dashboard.css";
+@import "./views/_page-builder.css";
+
+/* Plugins */
+@import "./plugins/_actiontext.css";
+@import "./plugins/_tinymce.css";
+@import "./plugins/_trix.css";
+@import "./plugins/_uppy.css";
+@import "./plugins/_tom-select.css";

data/app/assets/tailwind/spree/admin/plugins/_actiontext.css

@@ -0,0 +1,35 @@
+/*
+ * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
+ * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
+ * inclusion directly in any other asset bundle and remove this file.
+ *
+ *= require trix
+*/
+
+/*
+ * We need to override trix.css's image gallery styles to accommodate the
+ * <action-text-attachment> element we wrap around attachments. Otherwise,
+ * images in galleries will be squished by the max-width: 33%; rule.
+*/
+
+@layer components {
+  .trix-content .attachment-gallery > action-text-attachment,
+  .trix-content .attachment-gallery > .attachment {
+    @apply flex-[1_0_33%] px-2 max-w-[33%];
+  }
+
+  .trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
+  .trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
+  .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
+  .trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
+    @apply flex-[0_0_50%] max-w-[50%];
+  }
+
+  .trix-content action-text-attachment .attachment {
+    @apply p-0! max-w-full!;
+  }
+
+  .trix-button--dialog {
+    @apply w-auto! h-auto!;
+  }
+}

data/app/assets/tailwind/spree/admin/plugins/_tinymce.css

@@ -0,0 +1,79 @@
+/* ==========================================================================
+   TINYMCE CUSTOM STYLES
+   ========================================================================== */
+
+@layer components {
+  /* Hide TinyMCE branding */
+  .tox-statusbar__branding {
+    @apply hidden;
+  }
+
+  .tox.tox-tinymce {
+    @apply rounded-md! border-0!;
+  }
+
+  .tox-edit-area__iframe {
+    @apply bg-white!;
+  }
+
+  .tox-tinymce--disabled .tox-edit-area__iframe {
+    @apply bg-gray-50!;
+  }
+
+  .tox .tox-edit-area::before {
+    @apply border-primary!;
+  }
+
+  /* Grey out the readonly textarea */
+  .rich-text-area-container:has(textarea.spree-rte[contenteditable='false']) {
+    textarea.spree-rte + .tox-tinymce .tox-edit-area__iframe {
+      @apply bg-gray-50!;
+    }
+  }
+
+  .tox .tox-tbtn {
+    @apply rounded-md!;
+    color: rgba(0, 0, 0, 0.6) !important;
+  }
+
+  .tox .tox-tbtn svg {
+    fill: rgba(0, 0, 0, 0.6) !important;
+  }
+
+  .tox .tox-editor-header {
+    @apply p-0!;
+  }
+
+  .tox .tox-edit-focus {
+    @apply hidden!;
+  }
+
+  .tox-statusbar {
+    @apply hidden!;
+  }
+
+  /* Override TinyMCE UI font size */
+  .tox-toolbar__group {
+    @apply text-sm!;
+  }
+
+  .tox-mbtn__select-label {
+    @apply text-sm!;
+  }
+
+  /* Override TinyMCE Content font size */
+  .tox-tinymce {
+    @apply text-sm!;
+  }
+
+  .tox .tox-collection__item-label,
+  .tox-tbtn__select-label {
+    @apply text-sm!;
+    font-family: var(--font-sans);
+  }
+
+  .tox.tox-tinymce-aux .tox-toolbar__overflow,
+  .tox .tox-menu {
+    @apply rounded-md!;
+  }
+}

data/app/assets/tailwind/spree/admin/plugins/_tom-select.css

@@ -0,0 +1,299 @@
+/* ==========================================================================
+   TOM SELECT CUSTOM STYLES
+   ========================================================================== */
+
+@layer components {
+  /* Base wrapper */
+  .ts-wrapper {
+    @apply relative;
+  }
+
+  .ts-wrapper.form-input,
+  .ts-wrapper.form-select {
+    @apply p-0!;
+  }
+
+  /* Dropdown */
+  .ts-dropdown,
+  .ts-dropdown.form-input {
+    @apply absolute mt-2! top-full left-0 w-full h-auto p-1 z-[10000000]! bg-white rounded-lg;
+    box-shadow: var(--shadow-dropdown);
+  }
+
+  .ts-dropdown .optgroup-header {
+    @apply text-xs leading-normal;
+  }
+
+  .ts-dropdown .optgroup:first-child:before {
+    @apply hidden;
+  }
+
+  .ts-dropdown .optgroup:before {
+    @apply block h-0 my-2 overflow-hidden border-t border-gray-200 -mx-3;
+    content: ' ';
+  }
+
+  .ts-dropdown .create {
+    @apply pl-3;
+  }
+
+  .ts-dropdown-content {
+    @apply p-0 overflow-y-auto overflow-x-hidden max-h-[200px] scroll-smooth;
+    overflow-scrolling: touch;
+  }
+
+  .ts-dropdown [data-selectable] {
+    @apply cursor-pointer overflow-hidden;
+  }
+
+  .ts-dropdown [data-selectable] .highlight {
+    @apply rounded-sm;
+    background: rgba(255, 237, 40, 0.4);
+  }
+
+  .ts-dropdown .option,
+  .ts-dropdown .optgroup-header,
+  .ts-dropdown .no-results,
+  .ts-dropdown .create {
+    @apply p-2 rounded-sm;
+  }
+
+  .ts-dropdown .option,
+  .ts-dropdown [data-disabled],
+  .ts-dropdown [data-disabled] [data-selectable].option {
+    @apply cursor-default opacity-50;
+  }
+
+  .ts-dropdown [data-selectable].option {
+    @apply opacity-100 cursor-pointer;
+  }
+
+  .ts-dropdown .optgroup:first-child .optgroup-header {
+    @apply border-t-0;
+  }
+
+  .ts-dropdown .optgroup-header {
+    @apply text-gray-600 bg-white cursor-default;
+  }
+
+  .ts-dropdown .active {
+    @apply bg-gray-100 text-gray-900;
+  }
+
+  .ts-dropdown .active.create {
+    @apply text-gray-900;
+  }
+
+  .ts-dropdown .create {
+    @apply text-gray-500;
+  }
+
+  .ts-dropdown .spinner {
+    @apply inline-block w-[30px] h-[30px] my-[3px] mx-3;
+  }
+
+  .ts-dropdown .spinner:after {
+    @apply block w-6 h-6 m-[3px] rounded-full border-[5px] border-gray-200 animate-spin;
+    content: " ";
+    border-color: var(--color-gray-200) transparent var(--color-gray-200) transparent;
+  }
+
+  /* Control */
+  .ts-control,
+  .ts-wrapper.single.input-active .ts-control {
+    @apply bg-white cursor-text;
+  }
+
+  .focus .ts-control {
+    @apply outline-2 outline-offset-2 outline-blue-500 border-gray-200 ring-0;
+  }
+
+  /* Validation states */
+  .is-invalid .ts-control,
+  .was-validated .invalid .ts-control {
+    border-color: var(--color-red);
+  }
+
+  .is-invalid .focus .ts-control,
+  .was-validated .invalid .focus .ts-control {
+    border-color: var(--color-red);
+    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+  }
+
+  .is-valid .ts-control {
+    border-color: var(--color-green);
+  }
+
+  .is-valid .focus .ts-control {
+    border-color: var(--color-green);
+    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
+  }
+
+  /* Multi-select items */
+  .ts-wrapper.multi .ts-control > div {
+    @apply cursor-pointer mr-[3px] mb-[3px] py-[1px] px-[5px] text-gray-800 border-0 border-gray-200 rounded-[calc(var(--radius-md)-1px)];
+    background: #efefef;
+  }
+
+  .ts-wrapper.multi .ts-control > div.active {
+    @apply bg-zinc-950 text-white border-0 border-transparent;
+  }
+
+  .ts-wrapper.multi.has-items .ts-control {
+    @apply pl-[calc(0.75rem-5px)];
+  }
+
+  /* Disabled state */
+  .ts-wrapper.disabled {
+    @apply pointer-events-none cursor-not-allowed!;
+  }
+
+  .ts-wrapper.disabled:hover:not(:focus) {
+    @apply border-0!;
+  }
+
+  .ts-wrapper.disabled .ts-control {
+    @apply pointer-events-none cursor-not-allowed! opacity-50 bg-gray-100;
+  }
+
+  .ts-wrapper.disabled .ts-control:hover:not(:focus) {
+    @apply border border-transparent!;
+  }
+
+  .disabled .ts-control,
+  .disabled .ts-control * {
+    @apply cursor-default!;
+  }
+
+  .disabled .ts-control {
+    @apply opacity-50 bg-gray-100;
+  }
+
+  .ts-wrapper.multi.disabled .ts-control > div,
+  .ts-wrapper.multi.disabled .ts-control > div.active {
+    @apply text-gray-500 bg-gray-100 border-0 border-gray-200;
+  }
+
+  /* Input styling */
+  .ts-control > * {
+    @apply align-baseline inline-block;
+  }
+
+  .ts-control > input {
+    @apply flex-auto inline-block! p-0! m-0! max-w-full! text-base min-w-28 min-h-0! max-h-none! indent-0! border-0! bg-none! leading-[inherit]! select-auto! shadow-none!;
+  }
+
+  .ts-control > input:focus {
+    @apply outline-none! ring-0!;
+  }
+
+  .has-items .ts-control > input {
+    @apply mx-1!;
+  }
+
+  /* Hidden input */
+  .input-hidden .ts-control > input {
+    @apply opacity-0 absolute -left-[10000px];
+  }
+
+  /* Single select caret */
+  .ts-wrapper.single .ts-control {
+    @apply pr-8 cursor-default;
+  }
+
+  .ts-wrapper.single .ts-control,
+  .ts-wrapper.single .ts-control input {
+    @apply cursor-default;
+  }
+
+  .ts-wrapper.single .ts-control:after {
+    @apply content-none;
+  }
+
+  .ts-wrapper.single.input-active .ts-control,
+  .ts-wrapper.single.input-active .ts-control input {
+    @apply cursor-text focus:outline-none focus:ring-0;
+  }
+
+  /* Form control integration */
+  .form-input.ts-wrapper {
+    @apply p-0 h-auto border-none bg-none rounded-none;
+  }
+
+  /* Small size */
+  .input-group-sm > .ts-wrapper .ts-control,
+  .ts-wrapper.form-input-sm .ts-control {
+    @apply text-xs px-3 rounded-sm;
+    min-height: calc(1.5em + 0.5rem + 2px);
+  }
+
+  .input-group-sm > .ts-wrapper.has-items .ts-control,
+  .ts-wrapper.form-input-sm.has-items .ts-control {
+    @apply text-xs pb-0;
+    min-height: calc(1.5em + 0.5rem + 2px) !important;
+  }
+
+  /* Large size */
+  .input-group-lg > .ts-wrapper > .ts-control,
+  .ts-wrapper.form-input-lg .ts-control {
+    @apply text-xl rounded-lg;
+    min-height: calc(1.5em + 1rem + 2px);
+  }
+
+  /* Input group integration */
+  .input-group > .ts-wrapper {
+    @apply grow;
+  }
+
+  .input-group > .ts-wrapper:not(:nth-child(2)) > .ts-control {
+    @apply rounded-tl-none rounded-bl-none;
+  }
+
+  .input-group > .ts-wrapper:not(:last-child) > .ts-control {
+    @apply rounded-tr-none rounded-br-none;
+  }
+
+  /* Hidden accessible */
+  .ts-hidden-accessible {
+    @apply border-0! overflow-hidden! p-0! absolute! w-px! whitespace-nowrap!;
+    clip: rect(0 0 0 0) !important;
+    clip-path: inset(50%) !important;
+  }
+
+  /* Remove button plugin */
+  .ts-wrapper.plugin-remove_button .item .remove {
+    @apply py-[3px] px-[6px];
+  }
+
+  .ts-wrapper .ts-control > .item .remove {
+    @apply inline-block align-middle text-base font-semibold ml-[3px] py-0 px-[3px] text-inherit no-underline rounded-sm opacity-50;
+  }
+
+  .ts-wrapper .ts-control > .item .remove:hover {
+    @apply opacity-100;
+    background: rgba(0, 0, 0, 0.05);
+  }
+
+  /* Clear button plugin */
+  .ts-wrapper .clear-button {
+    @apply absolute right-[calc(0.75rem+20px)] top-1/2 -translate-y-1/2 opacity-0 cursor-pointer transition-opacity duration-200;
+  }
+
+  .ts-wrapper.focus .clear-button,
+  .ts-wrapper:hover .clear-button {
+    @apply opacity-50;
+  }
+
+  .ts-wrapper .clear-button:hover {
+    @apply opacity-100;
+  }
+
+  /* Dropdown input plugin */
+  .ts-dropdown.plugin-dropdown_input .dropdown-input-wrap {
+    @apply py-[5px] px-3 border-b border-gray-200;
+  }
+
+  .ts-dropdown.plugin-dropdown_input .dropdown-input {
+    @apply w-full text-sm bg-white py-1.5 px-3 border border-gray-200 rounded-md;
+  }
+}

data/app/assets/tailwind/spree/admin/plugins/_trix.css

@@ -0,0 +1,100 @@
+/* ==========================================================================
+   TRIX CUSTOM STYLES
+   ========================================================================== */
+
+@layer components {
+  .trix-container {
+    @apply border border-gray-200 rounded-lg shadow-xs overflow-hidden;
+    @apply focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-blue-500;
+    @apply transition-all duration-100 ease-in-out;
+  }
+
+  trix-toolbar {
+    @apply p-1 w-full border-b border-gray-200 bg-gray-25!;
+  }
+
+  trix-toolbar .trix-button.trix-active {
+    @apply bg-gray-100!;
+  }
+
+  trix-toolbar .trix-button-group {
+    @apply gap-1 ml-0!;
+  }
+
+  trix-toolbar .trix-button {
+    @apply rounded-md! w-9! h-[30px]! p-1.5!;
+  }
+
+  trix-toolbar .trix-dialogs > .trix-dialog > .trix-dialog__link-fields > .trix-button-group > .trix-button--dialog {
+    @apply w-full! h-full! py-2 px-3!;
+  }
+
+  trix-toolbar .trix-dialog--x-video-embed {
+    @apply max-w-[600px];
+  }
+
+  trix-editor {
+    @apply m-2 rounded-lg border-0!;
+  }
+
+  .trix-container,
+  trix-editor {
+    @apply bg-white;
+  }
+
+  .trix-container:has(trix-editor[contenteditable='false']) {
+    @apply bg-gray-50;
+  }
+
+  .trix-container:has(trix-editor[contenteditable='false']):active {
+    @apply bg-gray-50!;
+  }
+
+  .trix-container:has(trix-editor[contenteditable='false']) trix-editor {
+    @apply bg-gray-50;
+  }
+
+  trix-toolbar .trix-button--icon::before {
+    @apply m-1;
+  }
+
+  trix-toolbar .trix-button,
+  trix-toolbar .trix-button-group {
+    @apply border-0! mb-0!;
+  }
+
+  trix-toolbar .trix-button {
+    @apply w-8! h-7! p-1;
+  }
+
+  trix-toolbar .trix-button:hover {
+    @apply bg-gray-200! text-gray-900!;
+  }
+
+  trix-toolbar .trix-button-row {
+    @apply flex flex-wrap! w-full;
+  }
+
+  trix-toolbar .trix-dialog {
+    @apply bg-white! border-t-0! rounded-lg! top-1!;
+  }
+
+  trix-toolbar .trix-dialog .trix-input {
+    @apply block w-full text-sm leading-normal text-gray-900 bg-white py-1.5 px-3 border border-gray-200 rounded-lg transition-all duration-150 ease-in-out;
+    background-clip: padding-box;
+  }
+
+  trix-toolbar .trix-dialog .trix-button {
+    @apply inline-block text-center align-middle select-none text-sm leading-normal bg-gray-50 font-normal py-2 px-4 mr-1 mb-0 rounded-lg border border-gray-200!;
+  }
+
+  trix-toolbar .trix-dialog__link-fields {
+    @apply items-center;
+  }
+
+  /* Video embed icon */
+  .trix-button--icon-embed::before {
+    @apply top-[8%]!;
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16"><path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"/></svg>');
+  }
+}

data/app/assets/tailwind/spree/admin/plugins/_uppy.css

@@ -0,0 +1,117 @@
+.uppy-Root {
+  @apply text-base! text-gray-950! leading-normal!;
+  font-family: var(--font-sans) !important;
+}
+
+.uppy-Dashboard-inner {
+  @apply bg-gray-25 border-gray-200;
+}
+
+.uppy-Dashboard-innerWrap,
+.uppy-Dashboard-inner,
+.uppy-Dashboard-AddFiles {
+  @apply rounded-lg!;
+}
+
+.uppy-Dashboard-Item-previewInnerWrap {
+  @apply bg-transparent! rounded-lg! shadow-none!;
+}
+
+/* Modal mode - overlay and positioning */
+.uppy-Dashboard--modal {
+  @apply z-[1055];
+}
+
+.uppy-Dashboard--modal .uppy-Dashboard-overlay {
+  @apply opacity-100! z-[1050];
+  background-color: rgba(255, 255, 255, 0.8) !important;
+}
+
+.uppy-Dashboard--modal .uppy-Dashboard-inner {
+  @apply border-gray-200! z-[1055];
+  box-shadow: 0px 0px 0px 1px rgba(179, 179, 179, 0.5), 0px 6px 12px -3px rgba(179, 179, 179, 0.35), 0px 6px 18px 0px rgba(179, 179, 179, 0.35) !important;
+}
+
+/* Hide modal when not open */
+.uppy-Dashboard--modal[aria-hidden="true"] {
+  @apply hidden!;
+}
+
+.uppy-Dashboard--modal[aria-hidden="true"] .uppy-Dashboard-overlay {
+  @apply hidden!;
+}
+
+.uppy-Dashboard--modal[aria-hidden="true"] .uppy-Dashboard-inner {
+  @apply hidden!;
+}
+
+/* Uppy buttons - btn btn-light btn-sm styles */
+.uppy-Dashboard-browse,
+.uppy-DashboardContent-back,
+.uppy-StatusBar-actionBtn {
+  /* btn base */
+  @apply inline-flex items-center justify-center text-center align-middle gap-2;
+  @apply cursor-pointer select-none no-underline;
+  @apply font-medium leading-normal border transition-colors duration-100 ease-linear;
+  /* btn-sm */
+  @apply px-2 py-1 text-base rounded-lg;
+  /* btn-light */
+  @apply text-gray-700 bg-gray-25! border-gray-200! shadow-xs!;
+}
+
+.uppy-Dashboard-browse:hover,
+.uppy-DashboardContent-back:hover,
+.uppy-StatusBar-actionBtn:hover {
+  @apply bg-gray-50 border-gray-200 text-gray-900;
+}
+
+.uppy-Dashboard-browse {
+  @apply ml-2;
+}
+
+/* Save button - btn btn-primary btn-sm styles */
+.uppy-DashboardContent-save {
+  /* btn base */
+  @apply inline-flex items-center justify-center text-center align-middle gap-2;
+  @apply cursor-pointer select-none no-underline;
+  @apply font-medium leading-normal border transition-colors duration-100 ease-linear;
+  /* btn-sm */
+  @apply px-2 py-1 text-sm rounded-lg;
+  /* btn-primary */
+  @apply text-white! bg-zinc-950 border-primary shadow-xs;
+}
+
+.uppy-DashboardContent-save:hover {
+  @apply bg-blue-900 border-blue-900;
+}
+
+/* Close button */
+.uppy-Dashboard-close {
+  @apply w-4 h-4 p-1 bg-white! rounded-md opacity-50 bg-no-repeat bg-center;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
+  background-size: 1rem;
+}
+
+.uppy-Dashboard-close:hover {
+  @apply opacity-100;
+}
+
+.uppy-Dashboard-close span {
+  @apply hidden;
+}
+
+.uppy-StatusBar.is-complete .uppy-StatusBar-progress {
+  @apply bg-blue-500!;
+}
+
+.uppy-Dashboard-AddFiles-title {
+  @apply text-base! font-normal!;
+}
+
+.uppy-size--md .uppy-DashboardContent-bar {
+  @apply h-14!;
+}
+
+.uppy-size--md .uppy-DashboardContent-title {
+  @apply leading-[56px]!;
+}