refactor css structure

bin/build.js

@@ -73,14 +73,7 @@ const defaultOptions = {
     ],
 }
 
-const corePackages = [
-    'forms',
-    'notifications',
-    'panels',
-    'schemas',
-    'support',
-    'tables',
-]
+const corePackages = ['forms', 'notifications', 'panels', 'schemas', 'support', 'tables']
 
 corePackages.forEach((packageName) => {
     compile({

docs-assets/app/resources/css/app.css

@@ -1,9 +1,15 @@
 @import 'tailwindcss';
-@import '../../../../packages/support/resources/css/tailwind.css';
+@import '/vendor/filament/support/resources/css/index.css';
+@import '/vendor/filament/actions/resources/css/index.css';
+@import '/vendor/filament/forms/resources/css/index.css';
+@import '/vendor/filament/infolists/resources/css/index.css';
+@import '/vendor/filament/notifications/resources/css/index.css';
+@import '/vendor/filament/schemas/resources/css/index.css';
+@import '/vendor/filament/tables/resources/css/index.css';
+@import '/vendor/filament/widgets/resources/css/index.css';
 
 @source '../views';
 @source '../../app';
-@source '../../../../packages';
 
 @theme {
     --font-sans: Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

package.json

@@ -3,14 +3,12 @@
     "type": "module",
     "scripts": {
         "dev:js": "node bin/build.js --dev",
-        "dev:forms-css": "npx @tailwindcss/cli -i ./packages/forms/resources/css/index.css -o ./packages/forms/dist/index.css --watch",
+        "dev:forms-css": "npx @tailwindcss/cli -i ./packages/forms/dist/index.css -o ./packages/forms/dist/index.css --watch",
         "dev:panels-css": "npx @tailwindcss/cli -i ./packages/panels/resources/css/theme.css -o ./packages/panels/dist/theme.css --watch",
-        "dev:support-css": "npx @tailwindcss/cli -i ./packages/support/resources/css/index.css -o ./packages/support/dist/index.css --watch",
         "dev": "npm-run-all --parallel dev:*",
         "build:js": "node bin/build.js",
-        "build:forms-css": "npx @tailwindcss/cli -i ./packages/forms/resources/css/index.css -o ./packages/forms/dist/index.css --minify",
+        "build:forms-css": "npx @tailwindcss/cli -i ./packages/forms/dist/index.css -o ./packages/forms/dist/index.css --minify",
         "build:panels-css": "npx @tailwindcss/cli -i ./packages/panels/resources/css/theme.css -o ./packages/panels/dist/theme.css --minify",
-        "build:support-css": "npx @tailwindcss/cli -i ./packages/support/resources/css/index.css -o ./packages/support/dist/index.css --minify",
         "build": "npm-run-all build:*",
         "build-demo": "npm run build && cd ../demo && php artisan filament:upgrade && cd ../filament && cd docs-assets/app && php artisan filament:upgrade && npm run build && cd ../../",
         "prettier": "npx prettier --write ."

packages/actions/resources/css/actions.css

@@ -0,0 +1,32 @@
+@layer components {
+    .fi-ac {
+        @apply gap-3;
+
+        &:not(.fi-width-full) {
+            @apply flex flex-wrap items-center;
+
+            &.fi-align-start,
+            &.fi-align-left {
+                @apply justify-start;
+            }
+
+            &.fi-align-center {
+                @apply justify-center;
+            }
+
+            &.fi-align-end,
+            &.fi-align-right {
+                @apply flex-row-reverse;
+            }
+
+            &.fi-align-between,
+            &.fi-align-justify {
+                @apply justify-between;
+            }
+        }
+
+        &.fi-width-full {
+            @apply grid grid-cols-[repeat(auto-fit,minmax(0,1fr))];
+        }
+    }
+}

packages/actions/resources/css/index.css

@@ -0,0 +1 @@
+@import './actions.css';

packages/forms/resources/css/components/builder.css

@@ -0,0 +1,137 @@
+@layer components {
+    .fi-fo-builder {
+        @apply grid gap-y-4;
+
+        & .fi-fo-builder-actions {
+            @apply flex gap-x-3;
+
+            &.fi-hidden {
+                @apply hidden;
+            }
+        }
+
+        & .fi-fo-builder-items {
+            @apply grid gap-4;
+        }
+
+        & .fi-fo-builder-item {
+            @apply rounded-xl bg-white ring-1 shadow-xs ring-gray-950/5 dark:bg-white/5 dark:ring-white/10;
+
+            &.fi-collapsed {
+                @apply overflow-hidden;
+
+                & .fi-fo-builder-item-header-collapsible-actions {
+                    @apply -rotate-180;
+                }
+
+                & .fi-fo-builder-item-header-collapse-action {
+                    @apply pointer-events-none opacity-0;
+                }
+            }
+
+            &:not(.fi-collapsed) {
+                & .fi-fo-builder-item-header-expand-action {
+                    @apply pointer-events-none opacity-0;
+                }
+            }
+        }
+
+        & .fi-fo-builder-item-header {
+            @apply flex items-center gap-x-3 overflow-hidden px-4 py-3;
+        }
+
+        &.fi-collapsible {
+            & .fi-fo-builder-item-header {
+                @apply cursor-pointer select-none;
+            }
+        }
+
+        & .fi-fo-builder-item-header-start-actions {
+            @apply flex items-center gap-x-3;
+        }
+
+        & .fi-fo-builder-item-header-icon {
+            @apply text-gray-400 dark:text-gray-500;
+        }
+
+        & .fi-fo-builder-item-header-label {
+            @apply text-sm font-medium text-gray-950 dark:text-white;
+
+            &.fi-truncated {
+                @apply truncate;
+            }
+        }
+
+        & .fi-fo-builder-item-header-end-actions {
+            @apply ms-auto flex items-center gap-x-3;
+        }
+
+        & .fi-fo-builder-item-header-collapsible-actions {
+            @apply relative transition;
+        }
+
+        & .fi-fo-builder-item-header-collapse-action {
+            @apply transition;
+        }
+
+        & .fi-fo-builder-item-header-expand-action {
+            @apply absolute inset-0 rotate-180 transition;
+        }
+
+        & .fi-fo-builder-item-content {
+            @apply relative border-t border-gray-100 dark:border-white/10;
+
+            &:not(.fi-fo-builder-item-content-has-preview) {
+                @apply p-4;
+            }
+        }
+
+        & .fi-fo-builder-item-preview {
+            &:not(.fi-interactive) {
+                @apply pointer-events-none;
+            }
+        }
+
+        & .fi-fo-builder-item-preview-edit-overlay {
+            @apply absolute inset-0 z-1 cursor-pointer;
+        }
+
+        & .fi-fo-builder-add-between-items-ctn {
+            @apply relative -top-2 mt-0! h-0;
+        }
+
+        & .fi-fo-builder-add-between-items {
+            @apply flex w-full justify-center opacity-0 transition duration-75 hover:opacity-100;
+        }
+
+        & .fi-fo-builder-block-picker-ctn {
+            @apply rounded-lg bg-white dark:bg-gray-900;
+        }
+
+        & .fi-fo-builder-label-between-items-ctn {
+            @apply relative border-t border-gray-200 dark:border-white/10;
+        }
+
+        & .fi-fo-builder-label-between-items {
+            @apply absolute -top-3 left-3 px-1 text-sm font-medium;
+        }
+
+        & .fi-fo-builder-block-picker {
+            @apply flex;
+
+            &.fi-align-start,
+            &.fi-align-left {
+                @apply justify-start;
+            }
+
+            &.fi-align-center {
+                @apply justify-center;
+            }
+
+            &.fi-align-end,
+            &.fi-align-right {
+                @apply justify-end;
+            }
+        }
+    }
+}

packages/forms/resources/css/components/checkbox-list.css

@@ -0,0 +1,47 @@
+@layer components {
+    .fi-fo-checkbox-list {
+        & .fi-fo-checkbox-list-search-input-wrp {
+            @apply mb-4;
+        }
+
+        & .fi-fo-checkbox-list-actions {
+            @apply mb-2;
+        }
+
+        & .fi-fo-checkbox-list-options {
+            @apply gap-4;
+
+            &.fi-grid-direction-col {
+                @apply -mt-4;
+
+                & .fi-fo-checkbox-list-option-ctn {
+                    @apply break-inside-avoid pt-4;
+                }
+            }
+        }
+
+        & .fi-fo-checkbox-list-option {
+            @apply flex gap-x-3;
+
+            & .fi-checkbox-input {
+                @apply mt-1;
+            }
+
+            & .fi-fo-checkbox-list-option-text {
+                @apply grid text-sm leading-6;
+            }
+
+            & .fi-fo-checkbox-list-option-label {
+                @apply overflow-hidden font-medium break-words text-gray-950 dark:text-white;
+            }
+
+            & .fi-fo-checkbox-list-option-description {
+                @apply text-gray-500 dark:text-gray-400;
+            }
+        }
+
+        & .fi-fo-checkbox-list-no-search-results-message {
+            @apply text-sm text-gray-500 dark:text-gray-400;
+        }
+    }
+}

packages/forms/resources/css/components/color-picker.css

@@ -0,0 +1,19 @@
+@layer components {
+    .fi-fo-color-picker {
+        & .fi-input-wrp-content {
+            @apply flex;
+        }
+
+        & .fi-fo-color-picker-preview {
+            @apply my-auto me-3 size-5 shrink-0 rounded-full select-none;
+
+            &.fi-empty {
+                @apply ring-1 ring-gray-200 ring-inset dark:ring-white/10;
+            }
+        }
+
+        & .fi-fo-color-picker-panel {
+            @apply absolute z-10 hidden rounded-lg shadow-lg;
+        }
+    }
+}

packages/forms/resources/css/components/date-time-picker.css

@@ -0,0 +1,90 @@
+@layer components {
+    .fi-fo-date-time-picker {
+        /* Prevent excessive date input height in WebKit */
+        /* https://github.com/twbs/bootstrap/issues/34433 */
+        & input::-webkit-datetime-edit {
+            display: block;
+            padding: 0;
+        }
+
+        & .fi-fo-date-time-picker-trigger {
+            @apply w-full;
+        }
+
+        & .fi-fo-date-time-picker-display-text-input {
+            @apply w-full border-none bg-transparent px-3 py-1.5 text-base text-gray-950 outline-hidden transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:var(--color-gray-500)] sm:text-sm sm:leading-6 dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:var(--color-gray-400)];
+        }
+
+        & .fi-fo-date-time-picker-panel {
+            @apply absolute z-10 space-y-3 rounded-lg bg-white p-4 ring-1 shadow-lg ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
+
+            & .fi-fo-date-time-picker-panel-header {
+                @apply flex items-center justify-between;
+            }
+        }
+
+        & .fi-fo-date-time-picker-month-select {
+            @apply grow cursor-pointer border-none bg-transparent p-0 text-sm font-medium text-gray-950 focus:ring-0 dark:bg-gray-900 dark:text-white;
+        }
+
+        & .fi-fo-date-time-picker-year-input {
+            @apply w-16 border-none bg-transparent p-0 text-right text-sm text-gray-950 focus:ring-0 dark:text-white;
+        }
+
+        & .fi-fo-date-time-picker-calendar-header {
+            @apply grid grid-cols-7 gap-1;
+
+            & .fi-fo-date-time-picker-calendar-header-day {
+                @apply text-center text-xs font-medium text-gray-500 dark:text-gray-400;
+            }
+        }
+
+        & .fi-fo-date-time-picker-calendar {
+            @apply grid grid-cols-[repeat(7,minmax(--spacing(7),1fr))] gap-1;
+
+            & .fi-fo-date-time-picker-calendar-day {
+                @apply rounded-full text-center text-sm leading-loose transition duration-75;
+
+                &.fi-disabled {
+                    @apply pointer-events-none opacity-50;
+                }
+
+                &:not(.fi-disabled) {
+                    @apply cursor-pointer;
+                }
+
+                &.fi-selected {
+                    @apply text-primary-600 dark:text-primary-400 bg-gray-50 dark:bg-white/5;
+                }
+
+                &.fi-focused:not(.fi-selected):not(.fi-disabled) {
+                    @apply bg-gray-50 dark:bg-white/5;
+                }
+
+                &.fi-fo-date-time-picker-calendar-day-today:not(.fi-focused):not(
+                    .fi-selected
+                ):not(.fi-disabled) {
+                    @apply text-primary-600 dark:text-primary-400;
+                }
+
+                &:not(.fi-fo-date-time-picker-calendar-day-today):not(
+                    .fi-selected
+                ) {
+                    @apply text-gray-950 dark:text-white;
+                }
+            }
+        }
+
+        & .fi-fo-date-time-picker-time-inputs {
+            @apply flex items-center justify-center rtl:flex-row-reverse;
+
+            & input {
+                @apply me-1 w-10 border-none bg-transparent p-0 text-center text-sm text-gray-950 focus:ring-0 dark:text-white;
+            }
+
+            & .fi-fo-date-time-picker-time-input-separator {
+                @apply text-sm font-medium text-gray-500 dark:text-gray-400;
+            }
+        }
+    }
+}

packages/forms/resources/css/components/field.css

@@ -0,0 +1,61 @@
+@layer components {
+    .fi-fo-field {
+        @apply grid gap-y-2;
+
+        &.fi-fo-field-has-inline-label {
+            @apply sm:grid-cols-3 sm:items-start sm:gap-x-4;
+
+            & .fi-fo-field-content-col {
+                @apply sm:col-span-2;
+            }
+        }
+
+        & .fi-fo-field-label-ctn {
+            @apply flex items-center gap-x-3;
+        }
+
+        & .fi-fo-field-label {
+            @apply inline-flex items-center gap-x-3 text-sm leading-6 font-medium text-gray-950 dark:text-white;
+
+            & .fi-fo-field-label-required-mark {
+                @apply text-danger-600 dark:text-danger-400 font-medium;
+            }
+
+            &.fi-hidden {
+                @apply sr-only;
+            }
+        }
+
+        & .fi-fo-field-label-col {
+            @apply grid auto-cols-fr gap-y-2;
+
+            &.fi-vertical-align-start {
+                @apply sm:items-start;
+            }
+
+            &.fi-vertical-align-center {
+                @apply sm:items-center;
+            }
+
+            &.fi-vertical-align-end {
+                @apply sm:items-end;
+            }
+        }
+
+        & .fi-fo-field-content-col {
+            @apply grid auto-cols-fr gap-y-2;
+        }
+
+        & .fi-fo-field-content-ctn {
+            @apply flex w-full items-center gap-x-3;
+        }
+
+        & .fi-fo-field-content {
+            @apply w-full;
+        }
+
+        & .fi-fo-field-wrp-error-message {
+            @apply text-danger-600 dark:text-danger-400 text-sm;
+        }
+    }
+}

packages/forms/resources/css/components/file-upload.css

@@ -0,0 +1,156 @@
+@layer components {
+    .fi-fo-file-upload {
+        @apply flex flex-col gap-y-2;
+
+        &.fi-align-start,
+        &.fi-align-left {
+            @apply items-start;
+        }
+
+        &.fi-align-center {
+            @apply items-center;
+        }
+
+        &.fi-align-end,
+        &.fi-align-right {
+            @apply items-end;
+        }
+
+        & .fi-fo-file-upload-input-ctn {
+            @apply h-full w-full;
+        }
+
+        &.fi-fo-file-upload-avatar {
+            & .fi-fo-file-upload-input-ctn {
+                @apply h-full w-32;
+            }
+        }
+
+        & .fi-fo-file-upload-error-message {
+            @apply text-danger-600 dark:text-danger-400 text-sm;
+        }
+
+        & .filepond--root {
+            @apply mb-0 rounded-lg bg-white font-sans ring-1 shadow-sm ring-gray-950/10 dark:bg-white/5 dark:ring-white/20;
+        }
+
+        & .filepond--root[data-disabled='disabled'] {
+            @apply bg-gray-50 dark:bg-transparent dark:ring-white/10;
+        }
+
+        & .filepond--panel-root {
+            @apply bg-transparent;
+        }
+
+        & .filepond--drop-label label {
+            @apply p-3! text-sm text-gray-600 dark:text-gray-400;
+        }
+
+        & .filepond--label-action {
+            @apply text-primary-600 hover:text-primary-500 dark:hover:text-primary-500 font-medium no-underline transition duration-75 dark:text-white;
+        }
+
+        & .filepond--drip-blob {
+            @apply bg-gray-400 dark:bg-gray-500;
+        }
+
+        & .filepond--root[data-style-panel-layout='grid'] .filepond--item {
+            @apply inline;
+            width: calc(50% - 0.5rem);
+        }
+
+        @media screen(lg) {
+            & .filepond--root[data-style-panel-layout='grid'] .filepond--item {
+                width: calc(33.33% - 0.5rem);
+            }
+        }
+
+        & .filepond--download-icon {
+            @apply pointer-events-auto me-1 inline-block h-4 w-4 bg-white align-bottom hover:bg-white/70;
+            -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItZG93bmxvYWQiPjxwYXRoIGQ9Ik0yMSAxNXY0YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0ydi00Ij48L3BhdGg+PHBvbHlsaW5lIHBvaW50cz0iNyAxMCAxMiAxNSAxNyAxMCI+PC9wb2x5bGluZT48bGluZSB4MT0iMTIiIHkxPSIxNSIgeDI9IjEyIiB5Mj0iMyI+PC9saW5lPjwvc3ZnPg==');
+            mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItZG93bmxvYWQiPjxwYXRoIGQ9Ik0yMSAxNXY0YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0ydi00Ij48L3BhdGg+PHBvbHlsaW5lIHBvaW50cz0iNyAxMCAxMiAxNSAxNyAxMCI+PC9wb2x5bGluZT48bGluZSB4MT0iMTIiIHkxPSIxNSIgeDI9IjEyIiB5Mj0iMyI+PC9saW5lPjwvc3ZnPg==');
+            -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+            -webkit-mask-size: 100%;
+            mask-size: 100%;
+        }
+
+        & .filepond--open-icon {
+            @apply pointer-events-auto me-1 inline-block h-4 w-4 bg-white align-bottom hover:bg-white/70;
+            -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJoLTYgdy02IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTEwIDZINmEyIDIgMCAwMC0yIDJ2MTBhMiAyIDAgMDAyIDJoMTBhMiAyIDAgMDAyLTJ2LTRNMTQgNGg2bTAgMHY2bTAtNkwxMCAxNCIgLz4KPC9zdmc+Cg==);
+            mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJoLTYgdy02IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTEwIDZINmEyIDIgMCAwMC0yIDJ2MTBhMiAyIDAgMDAyIDJoMTBhMiAyIDAgMDAyLTJ2LTRNMTQgNGg2bTAgMHY2bTAtNkwxMCAxNCIgLz4KPC9zdmc+Cg==);
+            -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+            -webkit-mask-size: 100%;
+            mask-size: 100%;
+        }
+
+        & .filepond--file-action-button.filepond--action-edit-item {
+            @apply bg-black/50;
+        }
+
+        & .fi-fo-file-upload-editor {
+            @apply fixed inset-0 isolate z-50 h-[100dvh] w-screen p-2 sm:p-10 md:p-20;
+
+            & .fi-fo-file-upload-editor-overlay {
+                @apply fixed inset-0 h-full w-full cursor-pointer bg-gray-950/50 dark:bg-gray-950/75;
+                will-change: transform;
+            }
+
+            & .fi-fo-file-upload-editor-window {
+                @apply isolate mx-auto flex h-full w-full flex-col overflow-hidden rounded-xl bg-white ring-1 ring-gray-900/10 lg:flex-row dark:bg-gray-800 dark:ring-gray-50/10;
+            }
+
+            & .fi-fo-file-upload-editor-image-ctn {
+                @apply h-full w-full flex-1 overflow-auto p-4;
+            }
+
+            & .fi-fo-file-upload-editor-image {
+                @apply h-full w-auto;
+            }
+
+            & .fi-fo-file-upload-editor-control-panel {
+                @apply flex h-full w-full flex-1 flex-col overflow-y-auto bg-gray-50 lg:max-w-xs dark:bg-gray-900/30;
+
+                & .fi-fo-file-upload-editor-control-panel-main {
+                    @apply flex-1 space-y-6 overflow-auto p-4;
+                }
+
+                & .fi-fo-file-upload-editor-control-panel-group {
+                    @apply grid gap-3;
+
+                    & .fi-btn-group {
+                        @apply w-full;
+                    }
+
+                    & .fi-btn.fi-active {
+                        @apply bg-gray-50 dark:bg-gray-700;
+                    }
+
+                    & .fi-fo-file-upload-editor-control-panel-group-title {
+                        @apply text-xs text-gray-950 dark:text-white;
+                    }
+                }
+
+                & .fi-fo-file-upload-editor-control-panel-footer {
+                    @apply flex items-center gap-3 px-4 py-3;
+                }
+
+                & .fi-fo-file-upload-editor-control-panel-reset-action {
+                    @apply ml-auto;
+                }
+            }
+
+            & .cropper-drag-box.cropper-crop.cropper-modal {
+                @apply bg-gray-100/50 opacity-100 dark:bg-gray-900/80;
+            }
+
+            &.fi-fo-file-upload-editor-circle-cropper {
+                & .cropper-view-box,
+                & .cropper-face {
+                    border-radius: 50%;
+                }
+            }
+        }
+    }
+}

packages/forms/resources/css/components/key-value.css

@@ -0,0 +1,59 @@
+@layer components {
+    .fi-fo-key-value {
+        & .fi-fo-key-value-table-ctn {
+            @apply divide-y divide-gray-200 dark:divide-white/10;
+        }
+
+        & .fi-fo-key-value-table {
+            @apply w-full table-auto divide-y divide-gray-200 dark:divide-white/5;
+
+            & > thead {
+                & > tr {
+                    & > th {
+                        @apply px-3 py-2 text-start text-sm font-medium text-gray-700 dark:text-gray-200;
+
+                        &.fi-has-action {
+                            @apply w-9 p-0;
+                        }
+                    }
+                }
+            }
+
+            & > tbody {
+                @apply divide-y divide-gray-200 dark:divide-white/5;
+
+                & > tr {
+                    @apply divide-x divide-gray-200 rtl:divide-x-reverse dark:divide-white/5;
+
+                    & > td {
+                        @apply w-1/2 p-0;
+
+                        &.fi-has-action {
+                            @apply w-auto p-0.5;
+
+                            & .fi-fo-key-value-table-row-sortable-handle {
+                                @apply flex;
+                            }
+                        }
+
+                        & .fi-input {
+                            @apply font-mono;
+                        }
+                    }
+                }
+            }
+        }
+
+        & .fi-fo-key-value-add-action-ctn {
+            @apply flex justify-center px-3 py-2;
+        }
+    }
+
+    .fi-fo-key-value-wrp {
+        &.fi-fo-field-has-inline-label {
+            & .fi-fo-field-label-col {
+                @apply sm:pt-1.5;
+            }
+        }
+    }
+}

packages/forms/resources/css/components/markdown-editor.css

@@ -0,0 +1,315 @@
+@layer components {
+    .fi-fo-markdown-editor {
+        --color-cm-red: #991b1b;
+        --color-cm-orange: #9a3412;
+        --color-cm-amber: #92400e;
+        --color-cm-yellow: #854d0e;
+        --color-cm-lime: #3f6212;
+        --color-cm-green: #166534;
+        --color-cm-emerald: #065f46;
+        --color-cm-teal: #115e59;
+        --color-cm-cyan: #155e75;
+        --color-cm-sky: #075985;
+        --color-cm-blue: #1e40af;
+        --color-cm-indigo: #3730a3;
+        --color-cm-violet: #5b21b6;
+        --color-cm-purple: #6b21a8;
+        --color-cm-fuchsia: #86198f;
+        --color-cm-pink: #9d174d;
+        --color-cm-rose: #9f1239;
+        --color-cm-gray: #18181b;
+        --color-cm-gray-muted: #71717a;
+        --color-cm-gray-background: #e4e4e7;
+
+        &:not(.fi-disabled) {
+            @apply max-w-full overflow-hidden font-mono text-base text-gray-950 sm:text-sm dark:text-white;
+        }
+
+        &.fi-disabled {
+            @apply prose dark:prose-invert block w-full max-w-none rounded-lg bg-gray-50 px-3 py-3 text-gray-500 ring-1 shadow-xs ring-gray-950/10 sm:text-sm dark:bg-transparent dark:text-gray-400 dark:ring-white/10;
+        }
+
+        & .cm-s-easymde .cm-comment {
+            background-color: transparent;
+            color: var(--color-cm-gray-muted);
+        }
+
+        & .EasyMDEContainer .CodeMirror-cursor {
+            border-color: currentColor;
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-keyword {
+            color: var(--color-cm-violet);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-atom {
+            color: var(--color-cm-blue);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-number {
+            color: var(--color-cm-green);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-def {
+            color: var(--color-cm-blue);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-variable {
+            color: var(--color-cm-yellow);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-variable-2 {
+            color: var(--color-cm-blue);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-variable-3 {
+            color: var(--color-cm-emerald);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-property {
+            color: var(--color-cm-gray);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-operator {
+            color: var(--color-cm-gray);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-string {
+            color: var(--color-cm-rose);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-string-2 {
+            color: var(--color-cm-rose);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-meta {
+            color: var(--color-cm-gray-muted);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-error {
+            color: var(--color-cm-red);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-qualifier {
+            color: var(--color-cm-gray-muted);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-builtin {
+            color: var(--color-cm-violet);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-bracket {
+            color: var(--color-cm-gray-muted);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-tag {
+            color: var(--color-cm-green);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-attribute {
+            color: var(--color-cm-blue);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-hr {
+            color: var(--color-cm-gray-muted);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-formatting-quote {
+            color: var(--color-cm-sky);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-formatting-quote + .cm-quote {
+            color: var(--color-cm-gray-muted);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-formatting-list,
+        & .EasyMDEContainer .cm-s-easymde .cm-formatting-list + .cm-variable-2,
+        & .EasyMDEContainer .cm-s-easymde .cm-tab + .cm-variable-2 {
+            color: var(--color-cm-gray);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-link {
+            color: var(--color-cm-blue);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-tag {
+            color: var(--color-cm-red);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-attribute {
+            color: var(--color-cm-amber);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-attribute + .cm-string {
+            color: var(--color-cm-green);
+        }
+
+        &
+        .EasyMDEContainer
+        .cm-s-easymde
+        .cm-formatting-code
+        + .cm-comment:not(.cm-formatting-code) {
+            background-color: var(--color-cm-gray-background);
+            color: var(--color-cm-gray);
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-header-1 {
+            @apply text-3xl;
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-header-2 {
+            @apply text-2xl;
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-header-3 {
+            @apply text-xl;
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-header-4 {
+            @apply text-lg;
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-header-5 {
+            @apply text-base;
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-header-6 {
+            @apply text-sm;
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-comment {
+            @apply bg-none;
+        }
+
+        & .EasyMDEContainer .cm-s-easymde .cm-formatting-code-block,
+        & .EasyMDEContainer .cm-s-easymde .cm-tab + .cm-comment {
+            @apply bg-transparent text-inherit;
+        }
+
+        & .EasyMDEContainer .CodeMirror {
+            @apply border-none bg-transparent px-3 py-1.5 text-inherit;
+        }
+
+        & .EasyMDEContainer .CodeMirror-scroll {
+            @apply h-auto;
+        }
+
+        & .EasyMDEContainer .editor-toolbar {
+            @apply flex gap-x-1 overflow-x-auto rounded-none border-0 border-b border-gray-200 px-2.5 py-2 dark:border-white/10;
+        }
+
+        & .EasyMDEContainer .editor-toolbar button {
+            @apply grid h-8 w-8 cursor-pointer place-content-center rounded-lg border-none p-0 transition duration-75 hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;
+        }
+
+        & .EasyMDEContainer .editor-toolbar button.active {
+            @apply bg-gray-50 dark:bg-white/5;
+        }
+
+        & .EasyMDEContainer .editor-toolbar button::before {
+            @apply block h-5 w-5 bg-gray-700;
+            content: '';
+            mask-position: center;
+            mask-repeat: no-repeat;
+        }
+
+        & .EasyMDEContainer .editor-toolbar button.active::before {
+            @apply bg-primary-600;
+        }
+
+        & .EasyMDEContainer .editor-toolbar .separator {
+            @apply m-0! w-1 border-none;
+        }
+
+        & .EasyMDEContainer .editor-toolbar .bold::before {
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M4 3a1 1 0 0 1 1-1h6a4.5 4.5 0 0 1 3.274 7.587A4.75 4.75 0 0 1 11.25 18H5a1 1 0 0 1-1-1V3Zm2.5 5.5v-4H11a2 2 0 1 1 0 4H6.5Zm0 2.5v4.5h4.75a2.25 2.25 0 0 0 0-4.5H6.5Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
+        }
+
+        & .EasyMDEContainer .editor-toolbar .italic::before {
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M8 2.75A.75.75 0 0 1 8.75 2h7.5a.75.75 0 0 1 0 1.5h-3.215l-4.483 13h2.698a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3.215l4.483-13H8.75A.75.75 0 0 1 8 2.75Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
+        }
+
+        & .EasyMDEContainer .editor-toolbar .strikethrough::before {
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M11.617 3.963c-1.186-.318-2.418-.323-3.416.015-.992.336-1.49.91-1.642 1.476-.152.566-.007 1.313.684 2.1.528.6 1.273 1.1 2.128 1.446h7.879a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5h3.813a5.976 5.976 0 0 1-.447-.456C5.18 7.479 4.798 6.231 5.11 5.066c.312-1.164 1.268-2.055 2.61-2.509 1.336-.451 2.877-.42 4.286-.043.856.23 1.684.592 2.409 1.074a.75.75 0 1 1-.83 1.25 6.723 6.723 0 0 0-1.968-.875Zm1.909 8.123a.75.75 0 0 1 1.015.309c.53.99.607 2.062.18 3.01-.421.94-1.289 1.648-2.441 2.038-1.336.452-2.877.42-4.286.043-1.409-.377-2.759-1.121-3.69-2.18a.75.75 0 1 1 1.127-.99c.696.791 1.765 1.403 2.952 1.721 1.186.318 2.418.323 3.416-.015.853-.288 1.34-.756 1.555-1.232.21-.467.205-1.049-.136-1.69a.75.75 0 0 1 .308-1.014Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
+        }
+
+        & .EasyMDEContainer .editor-toolbar .link::before {
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath d='M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z' /%3E%3Cpath d='M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z' /%3E%3C/svg%3E%0A");
+        }
+
+        & .EasyMDEContainer .editor-toolbar .heading::before {
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M2.75 4a.75.75 0 0 1 .75.75v4.5h5v-4.5a.75.75 0 0 1 1.5 0v10.5a.75.75 0 0 1-1.5 0v-4.5h-5v4.5a.75.75 0 0 1-1.5 0V4.75A.75.75 0 0 1 2.75 4ZM13 8.75a.75.75 0 0 1 .75-.75h1.75a.75.75 0 0 1 .75.75v5.75h1a.75.75 0 0 1 0 1.5h-3.5a.75.75 0 0 1 0-1.5h1v-5h-1a.75.75 0 0 1-.75-.75Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
+        }
+
+        & .EasyMDEContainer .editor-toolbar .quote::before {
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M10 2c-2.236 0-4.43.18-6.57.524C1.993 2.755 1 4.014 1 5.426v5.148c0 1.413.993 2.67 2.43 2.902 1.168.188 2.352.327 3.55.414.28.02.521.18.642.413l1.713 3.293a.75.75 0 0 0 1.33 0l1.713-3.293a.783.783 0 0 1 .642-.413 41.102 41.102 0 0 0 3.55-.414c1.437-.231 2.43-1.49 2.43-2.902V5.426c0-1.413-.993-2.67-2.43-2.902A41.289 41.289 0 0 0 10 2ZM6.75 6a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Zm0 2.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
+        }
+
+        & .EasyMDEContainer .editor-toolbar .code::before {
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M6.28 5.22a.75.75 0 0 1 0 1.06L2.56 10l3.72 3.72a.75.75 0 0 1-1.06 1.06L.97 10.53a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Zm7.44 0a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L17.44 10l-3.72-3.72a.75.75 0 0 1 0-1.06ZM11.377 2.011a.75.75 0 0 1 .612.867l-2.5 14.5a.75.75 0 0 1-1.478-.255l2.5-14.5a.75.75 0 0 1 .866-.612Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
+        }
+
+        & .EasyMDEContainer .editor-toolbar .unordered-list::before {
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M6 4.75A.75.75 0 0 1 6.75 4h10.5a.75.75 0 0 1 0 1.5H6.75A.75.75 0 0 1 6 4.75ZM6 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H6.75A.75.75 0 0 1 6 10Zm0 5.25a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H6.75a.75.75 0 0 1-.75-.75ZM1.99 4.75a1 1 0 0 1 1-1H3a1 1 0 0 1 1 1v.01a1 1 0 0 1-1 1h-.01a1 1 0 0 1-1-1v-.01ZM1.99 15.25a1 1 0 0 1 1-1H3a1 1 0 0 1 1 1v.01a1 1 0 0 1-1 1h-.01a1 1 0 0 1-1-1v-.01ZM1.99 10a1 1 0 0 1 1-1H3a1 1 0 0 1 1 1v.01a1 1 0 0 1-1 1h-.01a1 1 0 0 1-1-1V10Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
+        }
+
+        & .EasyMDEContainer .editor-toolbar .ordered-list::before {
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath d='M3 1.25a.75.75 0 0 0 0 1.5h.25v2.5a.75.75 0 0 0 1.5 0V2A.75.75 0 0 0 4 1.25H3ZM2.97 8.654a3.5 3.5 0 0 1 1.524-.12.034.034 0 0 1-.012.012L2.415 9.579A.75.75 0 0 0 2 10.25v1c0 .414.336.75.75.75h2.5a.75.75 0 0 0 0-1.5H3.927l1.225-.613c.52-.26.848-.79.848-1.371 0-.647-.429-1.327-1.193-1.451a5.03 5.03 0 0 0-2.277.155.75.75 0 0 0 .44 1.434ZM7.75 3a.75.75 0 0 0 0 1.5h9.5a.75.75 0 0 0 0-1.5h-9.5ZM7.75 9.25a.75.75 0 0 0 0 1.5h9.5a.75.75 0 0 0 0-1.5h-9.5ZM7.75 15.5a.75.75 0 0 0 0 1.5h9.5a.75.75 0 0 0 0-1.5h-9.5ZM2.625 13.875a.75.75 0 0 0 0 1.5h1.5a.125.125 0 0 1 0 .25H3.5a.75.75 0 0 0 0 1.5h.625a.125.125 0 0 1 0 .25h-1.5a.75.75 0 0 0 0 1.5h1.5a1.625 1.625 0 0 0 1.37-2.5 1.625 1.625 0 0 0-1.37-2.5h-1.5Z' /%3E%3C/svg%3E%0A");
+        }
+
+        & .EasyMDEContainer .editor-toolbar .table::before {
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M.99 5.24A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25l.01 9.5A2.25 2.25 0 0 1 16.76 17H3.26A2.267 2.267 0 0 1 1 14.74l-.01-9.5Zm8.26 9.52v-.625a.75.75 0 0 0-.75-.75H3.25a.75.75 0 0 0-.75.75v.615c0 .414.336.75.75.75h5.373a.75.75 0 0 0 .627-.74Zm1.5 0a.75.75 0 0 0 .627.74h5.373a.75.75 0 0 0 .75-.75v-.615a.75.75 0 0 0-.75-.75H11.5a.75.75 0 0 0-.75.75v.625Zm6.75-3.63v-.625a.75.75 0 0 0-.75-.75H11.5a.75.75 0 0 0-.75.75v.625c0 .414.336.75.75.75h5.25a.75.75 0 0 0 .75-.75Zm-8.25 0v-.625a.75.75 0 0 0-.75-.75H3.25a.75.75 0 0 0-.75.75v.625c0 .414.336.75.75.75H8.5a.75.75 0 0 0 .75-.75ZM17.5 7.5v-.625a.75.75 0 0 0-.75-.75H11.5a.75.75 0 0 0-.75.75V7.5c0 .414.336.75.75.75h5.25a.75.75 0 0 0 .75-.75Zm-8.25 0v-.625a.75.75 0 0 0-.75-.75H3.25a.75.75 0 0 0-.75.75V7.5c0 .414.336.75.75.75H8.5a.75.75 0 0 0 .75-.75Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
+        }
+
+        & .EasyMDEContainer .editor-toolbar .upload-image::before {
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M1 5.25A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25v9.5A2.25 2.25 0 0 1 16.75 17H3.25A2.25 2.25 0 0 1 1 14.75v-9.5Zm1.5 5.81v3.69c0 .414.336.75.75.75h13.5a.75.75 0 0 0 .75-.75v-2.69l-2.22-2.219a.75.75 0 0 0-1.06 0l-1.91 1.909.47.47a.75.75 0 1 1-1.06 1.06L6.53 8.091a.75.75 0 0 0-1.06 0l-2.97 2.97ZM12 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
+        }
+
+        & .EasyMDEContainer .editor-toolbar .undo::before {
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M7.793 2.232a.75.75 0 0 1-.025 1.06L3.622 7.25h10.003a5.375 5.375 0 0 1 0 10.75H10.75a.75.75 0 0 1 0-1.5h2.875a3.875 3.875 0 0 0 0-7.75H3.622l4.146 3.957a.75.75 0 0 1-1.036 1.085l-5.5-5.25a.75.75 0 0 1 0-1.085l5.5-5.25a.75.75 0 0 1 1.06.025Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
+        }
+
+        & .EasyMDEContainer .editor-toolbar .redo::before {
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M12.207 2.232a.75.75 0 0 0 .025 1.06l4.146 3.958H6.375a5.375 5.375 0 0 0 0 10.75H9.25a.75.75 0 0 0 0-1.5H6.375a3.875 3.875 0 0 1 0-7.75h10.003l-4.146 3.957a.75.75 0 0 0 1.036 1.085l5.5-5.25a.75.75 0 0 0 0-1.085l-5.5-5.25a.75.75 0 0 0-1.06.025Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
+        }
+
+        & .EasyMDEContainer .editor-statusbar {
+            @apply hidden;
+        }
+    }
+
+    .dark .fi-fo-markdown-editor {
+        --color-cm-red: #f87171;
+        --color-cm-orange: #fb923c;
+        --color-cm-amber: #fbbf24;
+        --color-cm-yellow: #facc15;
+        --color-cm-lime: #a3e635;
+        --color-cm-green: #4ade80;
+        --color-cm-emerald: #4ade80;
+        --color-cm-teal: #2dd4bf;
+        --color-cm-cyan: #22d3ee;
+        --color-cm-sky: #38bdf8;
+        --color-cm-blue: #60a5fa;
+        --color-cm-indigo: #818cf8;
+        --color-cm-violet: #a78bfa;
+        --color-cm-purple: #c084fc;
+        --color-cm-fuchsia: #e879f9;
+        --color-cm-pink: #f472b6;
+        --color-cm-rose: #fb7185;
+        --color-cm-gray: #fafafa;
+        --color-cm-gray-muted: #a1a1aa;
+        --color-cm-gray-background: #52525b;
+
+        & .EasyMDEContainer .cm-s-easymde span.CodeMirror-selectedtext {
+            filter: invert(100%);
+        }
+
+        & .EasyMDEContainer .editor-toolbar button::before {
+            @apply bg-gray-300;
+        }
+
+        & .EasyMDEContainer .editor-toolbar button.active::before {
+            @apply bg-primary-400;
+        }
+    }
+}

packages/forms/resources/css/components/radio.css

@@ -0,0 +1,33 @@
+@layer components {
+    .fi-fo-radio {
+        @apply gap-4;
+
+        &.fi-inline {
+            @apply flex flex-wrap;
+        }
+
+        &:not(.fi-inline).fi-grid-direction-col {
+            @apply -mt-4;
+
+            & > .fi-fo-radio-label {
+                @apply break-inside-avoid pt-4;
+            }
+        }
+
+        & > .fi-fo-radio-label {
+            @apply flex gap-x-3 self-start;
+
+            & > .fi-radio-input {
+                @apply mt-1;
+            }
+
+            & > .fi-fo-radio-label-text {
+                @apply grid text-sm leading-6 font-medium text-gray-950 dark:text-white;
+            }
+
+            & .fi-fo-radio-label-description {
+                @apply font-normal text-gray-500 dark:text-gray-400;
+            }
+        }
+    }
+}

packages/forms/resources/css/components/repeater.css

@@ -0,0 +1,157 @@
+@layer components {
+    .fi-fo-repeater {
+        @apply grid gap-y-4;
+
+        & .fi-fo-repeater-actions {
+            @apply flex gap-x-3;
+
+            &.fi-hidden {
+                @apply hidden;
+            }
+        }
+
+        & .fi-fo-repeater-items {
+            @apply items-start gap-4;
+        }
+
+        & .fi-fo-repeater-item {
+            @apply divide-y divide-gray-100 rounded-xl bg-white ring-1 shadow-xs ring-gray-950/5 dark:divide-white/10 dark:bg-white/5 dark:ring-white/10;
+
+            &.fi-collapsed {
+                @apply overflow-hidden;
+
+                & .fi-fo-repeater-item-header-collapsible-actions {
+                    @apply -rotate-180;
+                }
+
+                & .fi-fo-repeater-item-header-collapse-action {
+                    @apply pointer-events-none opacity-0;
+                }
+            }
+
+            &:not(.fi-collapsed) {
+                & .fi-fo-repeater-item-header-expand-action {
+                    @apply pointer-events-none opacity-0;
+                }
+            }
+        }
+
+        & .fi-fo-repeater-item-header {
+            @apply flex items-center gap-x-3 overflow-hidden px-4 py-3;
+        }
+
+        &.fi-collapsible {
+            & .fi-fo-repeater-item-header {
+                @apply cursor-pointer select-none;
+            }
+        }
+
+        & .fi-fo-repeater-item-header-start-actions {
+            @apply flex items-center gap-x-3;
+        }
+
+        & .fi-fo-repeater-item-header-icon {
+            @apply text-gray-400 dark:text-gray-500;
+        }
+
+        & .fi-fo-repeater-item-header-label {
+            @apply text-sm font-medium text-gray-950 dark:text-white;
+
+            &.fi-truncated {
+                @apply truncate;
+            }
+        }
+
+        & .fi-fo-repeater-item-header-end-actions {
+            @apply ms-auto flex items-center gap-x-3;
+        }
+
+        & .fi-fo-repeater-item-header-collapsible-actions {
+            @apply relative transition;
+        }
+
+        & .fi-fo-repeater-item-header-collapse-action {
+            @apply transition;
+        }
+
+        & .fi-fo-repeater-item-header-expand-action {
+            @apply absolute inset-0 rotate-180 transition;
+        }
+
+        & .fi-fo-repeater-item-content {
+            @apply p-4;
+        }
+
+        & .fi-fo-repeater-add-between-items-ctn {
+            @apply flex w-full justify-center;
+        }
+
+        & .fi-fo-repeater-add-between-items {
+            @apply rounded-lg bg-white dark:bg-gray-900;
+        }
+
+        & .fi-fo-repeater-label-between-items-ctn {
+            @apply relative border-t border-gray-200 dark:border-white/10;
+        }
+
+        & .fi-fo-repeater-label-between-items {
+            @apply absolute -top-3 left-3 px-1 text-sm font-medium;
+        }
+
+        & .fi-fo-repeater-add {
+            @apply flex w-full;
+
+            &.fi-align-start,
+            &.fi-align-left {
+                @apply justify-start;
+            }
+
+            &.fi-align-center {
+                @apply justify-center;
+            }
+
+            &.fi-align-end,
+            &.fi-align-right {
+                @apply justify-end;
+            }
+        }
+    }
+
+    .fi-fo-simple-repeater {
+        @apply grid gap-y-4;
+
+        & .fi-fo-repeater-items {
+            @apply gap-4;
+        }
+
+        & .fi-fo-repeater-item {
+            @apply flex justify-start gap-x-3;
+        }
+
+        & .fi-fo-repeater-item-content {
+            @apply flex-1;
+        }
+
+        & .fi-fo-repeater-item-actions {
+            @apply flex items-center gap-x-1;
+        }
+
+        & .fi-fo-repeater-add {
+            @apply flex w-full;
+
+            &.fi-align-start,
+            &.fi-align-left {
+                @apply justify-start;
+            }
+
+            &.fi-align-center {
+                @apply justify-center;
+            }
+
+            &.fi-align-end,
+            &.fi-align-right {
+                @apply justify-end;
+            }
+        }
+    }
+}

packages/forms/resources/css/components/rich-editor.css

@@ -0,0 +1,35 @@
+@layer components {
+    .fi-fo-rich-editor {
+        &.fi-fo-rich-editor-uploading-file {
+            @apply pointer-events-none cursor-wait opacity-50;
+        }
+
+        & .fi-fo-rich-editor-toolbar {
+            @apply relative flex gap-x-3 overflow-x-auto border-b border-gray-200 px-2.5 py-2 dark:border-white/10;
+
+            & .fi-fo-rich-editor-toolbar-group {
+                @apply flex gap-x-1;
+            }
+
+            & .fi-fo-rich-editor-toolbar-btn {
+                @apply flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-lg text-sm font-semibold text-gray-700 transition duration-75 hover:bg-gray-50 focus-visible:bg-gray-50 dark:text-gray-200 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;
+
+                &.fi-active {
+                    @apply text-primary-600 dark:text-primary-400 bg-gray-50 dark:bg-white/5;
+                }
+            }
+        }
+
+        & .fi-fo-rich-editor-content {
+            @apply prose dark:prose-invert min-h-full w-full max-w-none px-5;
+        }
+
+        & .tiptap:focus {
+            @apply outline-none;
+        }
+
+        & img.fi-loading {
+            @apply animate-pulse;
+        }
+    }
+}

packages/forms/resources/css/components/select.css

@@ -0,0 +1,204 @@
+@layer components {
+    .fi-fo-select {
+        & .fi-hidden {
+            @apply hidden;
+        }
+
+        &.fi-fo-select-has-inline-prefix {
+            & .choices__inner {
+                @apply ps-0;
+            }
+        }
+
+        &.fi-fo-select-native {
+            & select:not(.choices) {
+                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
+            }
+        }
+
+        &:not(.fi-fo-select-native) {
+            & select {
+                @apply h-9 w-full rounded-lg border-none bg-transparent bg-none!;
+            }
+        }
+
+        & .choices {
+            @apply relative outline-none;
+        }
+
+        & .choices [hidden] {
+            @apply hidden!;
+        }
+
+        & .choices[data-type*='select-one'] .has-no-choices {
+            @apply hidden;
+        }
+
+        & .choices[data-type*='select-one'] .choices__input {
+            @apply m-0 block w-full;
+        }
+
+        & .choices__inner {
+            @apply bg-no-repeat py-1.5 ps-3 pe-8 outline-none sm:text-sm sm:leading-6;
+            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
+            background-position: right 0.5rem center;
+            background-size: 1.5em 1.5em;
+        }
+
+        & .choices.is-disabled .choices__inner {
+            @apply cursor-default;
+        }
+
+        & .choices__list--single {
+            @apply inline-block;
+        }
+
+        & .choices__list--single .choices__item {
+            @apply text-gray-950 dark:text-white;
+        }
+
+        & .choices.is-disabled .choices__list--single .choices__item {
+            @apply text-gray-500 dark:text-gray-400;
+        }
+
+        & .choices__list--multiple {
+            @apply flex flex-wrap gap-1.5;
+        }
+
+        & .choices__list--multiple:not(:empty) {
+            @apply -mx-1 mb-1 py-0.5;
+        }
+
+        & .choices__list--multiple .choices__item {
+            @apply bg-primary-50 text-primary-600 ring-primary-600/10 dark:bg-primary-400/10 dark:text-primary-400 dark:ring-primary-400/30 inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium break-all ring-1 ring-inset;
+        }
+
+        & .choices__list--dropdown,
+        & .choices__list[aria-expanded] {
+            @apply absolute top-full z-10 mt-2 hidden w-full overflow-hidden rounded-lg bg-white text-sm break-words ring-1 shadow-lg ring-gray-950/5 will-change-[visibility] dark:bg-gray-900 dark:ring-white/10;
+        }
+
+        & .is-active.choices__list--dropdown,
+        & .is-active.choices__list[aria-expanded] {
+            @apply block p-1;
+        }
+
+        & .choices__list--dropdown .choices__list,
+        & .choices__list[aria-expanded] .choices__list {
+            @apply max-h-60 overflow-auto will-change-scroll;
+        }
+
+        & .choices__item--choice {
+            @apply p-2 text-gray-500 transition-colors duration-75 dark:text-gray-400;
+        }
+
+        & .choices__item--choice.choices__item--selectable {
+            @apply rounded-md text-gray-950 dark:text-white;
+        }
+
+        & .choices__list--dropdown .choices__item--selectable.is-highlighted,
+        & .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
+            @apply bg-gray-50 dark:bg-white/5;
+        }
+
+        & .choices__item {
+            @apply cursor-default;
+        }
+
+        & .choices__item--disabled {
+            @apply pointer-events-none disabled:text-gray-500 dark:disabled:text-gray-400;
+        }
+
+        & .choices__placeholder.choices__item,
+        & .choices.is-disabled .choices__placeholder.choices__item {
+            @apply cursor-default text-gray-400 dark:text-gray-500;
+        }
+
+        & .choices__button {
+            @apply border-0 bg-transparent bg-center bg-no-repeat indent-[-9999px] outline-none;
+        }
+
+        & .choices[data-type*='select-one'] .choices__button {
+            @apply absolute end-0 me-9 h-4 w-4 p-0 opacity-50 transition-opacity duration-75 dark:opacity-40;
+            background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==');
+            background-size: 0.7142em 0.7142em;
+            top: calc(50% - 0.5714em);
+        }
+
+        & .choices[data-type*='select-multiple'] .choices__button {
+            @apply h-4 w-4 opacity-50 dark:opacity-40;
+            background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==');
+            background-size: 0.7142em 0.7142em;
+        }
+
+        & .choices[data-type*='select-one'] .choices__button:hover,
+        & .choices[data-type*='select-one'] .choices__button:focus-visible,
+        & .choices[data-type*='select-multiple'] .choices__button:hover,
+        & .choices[data-type*='select-multiple'] .choices__button:focus-visible {
+            @apply opacity-70 dark:opacity-60;
+        }
+
+        &
+        .choices[data-type*='select-one']
+        &
+        .choices__item[data-value='']
+        &
+        .choices__button {
+            @apply hidden;
+        }
+
+        & .choices.is-disabled .choices__button {
+            @apply hidden;
+        }
+
+        /* !important is used to override default Tailwind input styling */
+
+        & .choices__input {
+            @apply border-none bg-transparent! p-0! text-base! text-gray-950 transition duration-75 placeholder:text-gray-400 focus-visible:!ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:var(--color-gray-500)] sm:!text-sm sm:leading-6 dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:var(--color-gray-400)];
+
+            &:focus-visible {
+                @apply outline-none;
+            }
+        }
+
+        & .choices__list--dropdown .choices__input {
+            @apply px-2! py-2!;
+        }
+
+        & .choices__input::-webkit-search-decoration,
+        & .choices__input::-webkit-search-cancel-button,
+        & .choices__input::-webkit-search-results-button,
+        & .choices__input::-webkit-search-results-decoration {
+            @apply hidden;
+        }
+
+        & .choices__input::-ms-clear,
+        & .choices__input::-ms-reveal {
+            @apply hidden h-0 w-0;
+        }
+
+        & .choices__group {
+            @apply px-2 pt-4 pb-2 text-gray-500 first:pt-2 dark:text-gray-400;
+        }
+    }
+
+    .dark .fi-fo-select {
+        & .choices[data-type*='select-one'] .choices__button {
+            background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==');
+        }
+
+        & .choices[data-type*='select-multiple'] .choices__button {
+            background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==');
+        }
+    }
+
+    [dir='rtl'] .fi-fo-select {
+        & .choices__inner {
+            background-position: left 0.5rem center;
+        }
+
+        & select {
+            background-position: left 0.5rem center !important;
+        }
+    }
+}

packages/forms/resources/css/components/tags-input.css

@@ -0,0 +1,35 @@
+@layer components {
+    .fi-fo-tags-input {
+        &.fi-disabled {
+            & .fi-badge-delete-btn {
+                @apply hidden;
+            }
+        }
+
+        & .fi-fo-tags-input-tags-ctn {
+            @apply flex w-full flex-wrap gap-1.5 border-t border-t-gray-200 p-2 dark:border-t-white/10;
+
+            & > template {
+                @apply hidden;
+            }
+
+            & > .fi-badge {
+                &.fi-reorderable {
+                    @apply cursor-move;
+                }
+
+                & .fi-badge-label-ctn {
+                    @apply text-start select-none;
+                }
+            }
+        }
+    }
+
+    .fi-fo-tags-input-wrp {
+        &.fi-fo-field-has-inline-label {
+            & .fi-fo-field-label-col {
+                @apply sm:pt-1.5;
+            }
+        }
+    }
+}

packages/forms/resources/css/components/text-input.css

@@ -0,0 +1,19 @@
+@layer components {
+    .fi-fo-text-input {
+        @apply overflow-hidden;
+
+        & input {
+            &.fi-revealable {
+                @apply [&::-ms-reveal]:hidden;
+            }
+        }
+    }
+
+    .fi-fo-text-input-wrp {
+        &.fi-fo-field-has-inline-label {
+            & .fi-fo-field-label-col {
+                @apply sm:pt-1.5;
+            }
+        }
+    }
+}

packages/forms/resources/css/components/textarea.css

@@ -0,0 +1,23 @@
+@layer components {
+    .fi-fo-textarea {
+        @apply overflow-hidden;
+
+        & textarea {
+            @apply block h-full w-full border-none bg-transparent px-3 py-1.5 text-base text-gray-950 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:var(--color-gray-500)] disabled:placeholder:[-webkit-text-fill-color:var(--color-gray-400)] sm:text-sm sm:leading-6 dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:var(--color-gray-400)] dark:disabled:placeholder:[-webkit-text-fill-color:var(--color-gray-500)];
+        }
+
+        &.fi-autosizable {
+            & textarea {
+                @apply resize-none;
+            }
+        }
+    }
+
+    .fi-fo-textarea-wrp {
+        &.fi-fo-field-has-inline-label {
+            & .fi-fo-field-label-col {
+                @apply sm:pt-1.5;
+            }
+        }
+    }
+}

packages/forms/resources/css/components/toggle-buttons.css

@@ -0,0 +1,35 @@
+@layer components {
+    .fi-fo-toggle-buttons {
+        &.fi-btn-group {
+            @apply w-max;
+        }
+
+        &:not(.fi-btn-group) {
+            @apply gap-3;
+
+            &.fi-inline {
+                @apply flex flex-wrap;
+            }
+
+            &:not(.fi-inline).fi-grid-direction-col {
+                @apply -mt-3;
+
+                & .fi-fo-toggle-buttons-btn-ctn {
+                    @apply break-inside-avoid pt-3;
+                }
+            }
+        }
+
+        & .fi-fo-toggle-buttons-input {
+            @apply pointer-events-none absolute opacity-0;
+        }
+    }
+
+    .fi-fo-toggle-buttons-wrp {
+        &.fi-fo-field-has-inline-label {
+            & .fi-fo-field-label-col {
+                @apply sm:pt-1.5;
+            }
+        }
+    }
+}

packages/forms/resources/css/index.css

@@ -1,6 +1,17 @@
-@import 'tailwindcss';
-@import '../../../support/resources/css/tailwind.css';
-
-@layer components {
-    @import '../../dist/index.css';
-}
+@import '../../dist/index.css' layer(components);
+@import './components/builder.css';
+@import './components/checkbox-list.css';
+@import './components/color-picker.css';
+@import './components/date-time-picker.css';
+@import './components/field.css';
+@import './components/file-upload.css';
+@import './components/key-value.css';
+@import './components/markdown-editor.css';
+@import './components/radio.css';
+@import './components/repeater.css';
+@import './components/rich-editor.css';
+@import './components/select.css';
+@import './components/tags-input.css';
+@import './components/text-input.css';
+@import './components/textarea.css';
+@import './components/toggle-buttons.css';

packages/forms/resources/js/index.js

@@ -0,0 +1,6 @@
+import 'easymde/dist/easymde.min.css'
+import 'cropperjs/dist/cropper.min.css'
+import 'filepond/dist/filepond.min.css'
+import 'filepond-plugin-image-edit/dist/filepond-plugin-image-edit.css'
+import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css'
+import 'filepond-plugin-media-preview/dist/filepond-plugin-media-preview.css'

packages/forms/src/FormsServiceProvider.php

@@ -5,7 +5,6 @@ namespace Filament\Forms;
 use Filament\Forms\Testing\TestsFormComponentActions;
 use Filament\Forms\Testing\TestsForms;
 use Filament\Support\Assets\AlpineComponent;
-use Filament\Support\Assets\Css;
 use Filament\Support\Facades\FilamentAsset;
 use Illuminate\Filesystem\Filesystem;
 use Livewire\Features\SupportTesting\Testable;
@@ -40,7 +39,6 @@ class FormsServiceProvider extends PackageServiceProvider
             AlpineComponent::make('select', __DIR__ . '/../dist/components/select.js'),
             AlpineComponent::make('tags-input', __DIR__ . '/../dist/components/tags-input.js'),
             AlpineComponent::make('textarea', __DIR__ . '/../dist/components/textarea.js'),
-            Css::make('forms', __DIR__ . '/../dist/index.css'),
         ], 'filament/forms');
 
         if ($this->app->runningInConsole()) {

packages/infolists/resources/css/components/color.css

@@ -0,0 +1,36 @@
+@layer components {
+    .fi-in-color {
+        @apply flex w-full gap-1.5;
+
+        &.fi-wrapped {
+            @apply flex-wrap;
+        }
+
+        &.fi-align-start,
+        &.fi-align-left {
+            @apply justify-start;
+        }
+
+        &.fi-align-center {
+            @apply justify-center;
+        }
+
+        &.fi-align-end,
+        &.fi-align-right {
+            @apply justify-end;
+        }
+
+        &.fi-align-justify,
+        &.fi-align-between {
+            @apply justify-between;
+        }
+
+        & > .fi-in-color-item {
+            @apply size-6 rounded-md;
+
+            &.fi-copyable {
+                @apply cursor-pointer;
+            }
+        }
+    }
+}

packages/infolists/resources/css/components/entry.css

@@ -0,0 +1,70 @@
+@layer components {
+    .fi-in-entry {
+        @apply grid gap-y-2;
+
+        &.fi-in-entry-has-inline-label {
+            @apply sm:grid-cols-3 sm:items-start sm:gap-x-4;
+
+            & .fi-in-entry-content-col {
+                @apply sm:col-span-2;
+            }
+        }
+
+        & .fi-in-entry-label-ctn {
+            @apply flex items-center gap-x-3;
+        }
+
+        & .fi-in-entry-label {
+            @apply inline-flex items-center gap-x-3 text-sm leading-6 font-medium text-gray-950 dark:text-white;
+
+            &.fi-hidden {
+                @apply sr-only;
+            }
+        }
+
+        & .fi-in-entry-label-col {
+            @apply grid auto-cols-fr gap-y-2;
+        }
+
+        & .fi-in-entry-content-col {
+            @apply grid auto-cols-fr gap-y-2;
+        }
+
+        & .fi-in-entry-content-ctn {
+            @apply flex w-full items-center gap-x-3;
+        }
+
+        & .fi-in-entry-content {
+            @apply w-full;
+
+            &.fi-align-start {
+                @apply text-start;
+            }
+
+            &.fi-align-center {
+                @apply text-center;
+            }
+
+            &.fi-align-end {
+                @apply text-end;
+            }
+
+            &.fi-align-left {
+                @apply text-left;
+            }
+
+            &.fi-align-right {
+                @apply text-right;
+            }
+
+            &.fi-align-justify,
+            &.fi-align-between {
+                @apply text-justify;
+            }
+        }
+
+        & .fi-in-placeholder {
+            @apply text-sm leading-6 text-gray-400 dark:text-gray-500;
+        }
+    }
+}

packages/infolists/resources/css/components/icon.css

@@ -0,0 +1,40 @@
+@layer components {
+    .fi-in-icon {
+        @apply flex w-full gap-1.5;
+
+        &.fi-wrapped {
+            @apply flex-wrap;
+        }
+
+        &.fi-in-icon-has-line-breaks {
+            @apply flex-col;
+        }
+
+        &.fi-align-start,
+        &.fi-align-left {
+            @apply justify-start;
+        }
+
+        &.fi-align-center {
+            @apply justify-center;
+        }
+
+        &.fi-align-end,
+        &.fi-align-right {
+            @apply justify-end;
+        }
+
+        &.fi-align-justify,
+        &.fi-align-between {
+            @apply justify-between;
+        }
+
+        & > .fi-icon {
+            @apply text-gray-400 dark:text-gray-500;
+
+            &.fi-color {
+                @apply text-(--text) dark:text-(--dark-text);
+            }
+        }
+    }
+}

packages/infolists/resources/css/components/image.css

@@ -0,0 +1,121 @@
+@layer components {
+    .fi-in-image {
+        @apply flex w-full items-center gap-1.5;
+
+        & img {
+            @apply max-w-none object-cover object-center;
+        }
+
+        &.fi-circular {
+            & img {
+                @apply rounded-full;
+            }
+        }
+
+        &.fi-in-image-ring {
+            & img,
+            & .fi-in-image-limited-remaining-text {
+                @apply ring ring-white dark:ring-gray-900;
+            }
+
+            &.fi-in-image-ring-1 {
+                & img,
+                & .fi-in-image-limited-remaining-text {
+                    @apply ring-1;
+                }
+            }
+
+            &.fi-in-image-ring-2 {
+                & img,
+                & .fi-in-image-limited-remaining-text {
+                    @apply ring-2;
+                }
+            }
+
+            &.fi-in-image-ring-4 {
+                & img,
+                & .fi-in-image-limited-remaining-text {
+                    @apply ring-4;
+                }
+            }
+        }
+
+        &.fi-in-image-overlap-1 {
+            @apply gap-x-0 -space-x-1;
+        }
+
+        &.fi-in-image-overlap-2 {
+            @apply gap-x-0 -space-x-2;
+        }
+
+        &.fi-in-image-overlap-3 {
+            @apply gap-x-0 -space-x-3;
+        }
+
+        &.fi-in-image-overlap-4 {
+            @apply gap-x-0 -space-x-4;
+        }
+
+        &.fi-in-image-overlap-5 {
+            @apply gap-x-0 -space-x-5;
+        }
+
+        &.fi-in-image-overlap-6 {
+            @apply gap-x-0 -space-x-6;
+        }
+
+        &.fi-in-image-overlap-7 {
+            @apply gap-x-0 -space-x-7;
+        }
+
+        &.fi-in-image-overlap-8 {
+            @apply gap-x-0 -space-x-8;
+        }
+
+        &.fi-wrapped {
+            @apply flex-wrap;
+        }
+
+        &.fi-align-start,
+        &.fi-align-left {
+            @apply justify-start;
+        }
+
+        &.fi-align-center {
+            @apply justify-center;
+        }
+
+        &.fi-align-end,
+        &.fi-align-right {
+            @apply justify-end;
+        }
+
+        &.fi-align-justify,
+        &.fi-align-between {
+            @apply justify-between;
+        }
+
+        &.fi-stacked {
+            & .fi-in-image-limited-remaining-text {
+                @apply rounded-full bg-gray-100 dark:bg-gray-800;
+            }
+        }
+
+        & .fi-in-image-limited-remaining-text {
+            @apply flex items-center justify-center text-sm font-medium text-gray-500 dark:text-gray-400;
+
+            &.fi-size-xs {
+                @apply text-xs;
+            }
+
+            &.fi-size-base,
+            &.fi-size-md {
+                @apply text-base;
+            }
+
+            &.fi-size-lg {
+                @apply text-lg;
+            }
+        }
+    }
+}

packages/infolists/resources/css/components/key-value.css

@@ -0,0 +1,25 @@
+@layer components {
+    .fi-in-key-value {
+        @apply w-full table-auto divide-y divide-gray-200 rounded-lg bg-white ring-1 shadow-xs ring-gray-950/5 dark:divide-white/5 dark:bg-white/5 dark:ring-white/10;
+
+        & th {
+            @apply px-3 py-2 text-start text-sm font-medium text-gray-700 dark:text-gray-200;
+        }
+
+        & tbody {
+            @apply divide-y divide-gray-200 font-mono text-base sm:text-sm sm:leading-6 dark:divide-white/5;
+        }
+
+        & tr {
+            @apply divide-x divide-gray-200 rtl:divide-x-reverse dark:divide-white/5;
+        }
+
+        & td {
+            @apply w-1/2 px-3 py-1.5;
+
+            &.fi-in-placeholder {
+                @apply w-full py-2 text-center font-sans;
+            }
+        }
+    }
+}

packages/infolists/resources/css/components/repeatable.css

@@ -0,0 +1,17 @@
+@layer components {
+    .fi-in-repeatable {
+        &ul {
+            @apply gap-4;
+        }
+
+        & .fi-in-repeatable-item {
+            @apply block;
+        }
+
+        &.fi-contained {
+            & .fi-in-repeatable-item {
+                @apply rounded-xl bg-white p-4 ring-1 shadow-xs ring-gray-950/5 dark:bg-white/5 dark:ring-white/10;
+            }
+        }
+    }
+}

packages/infolists/resources/css/components/text.css

@@ -0,0 +1,238 @@
+@layer components {
+    .fi-in-text {
+        @apply w-full;
+
+        &.fi-in-text-affixed {
+            @apply flex gap-3;
+        }
+
+        & .fi-in-text-affixed-content {
+            @apply min-w-0 flex-1;
+        }
+
+        & .fi-in-text-affix {
+            @apply flex items-center gap-3 self-stretch;
+        }
+
+        &.fi-in-text-list-limited {
+            /* Add space between content and list limit message. */
+            @apply flex flex-col;
+
+            &.fi-in-text-has-badges {
+                /* When the content contains badges, more gap is required to balance the spacing. */
+                @apply gap-y-2;
+            }
+
+            &:not(.fi-in-text-has-badges) {
+                /* When the content does not contain badges, less gap is required to balance the spacing. */
+                @apply gap-y-1;
+            }
+        }
+
+        &ul.fi-bulleted,
+        &.fi-bulleted ul {
+            @apply list-inside list-disc;
+        }
+
+        &:not(.fi-in-text-has-line-breaks) {
+            &ul.fi-in-text-has-badges,
+            &.fi-in-text-has-badges ul {
+                /* A list of badges without line breaks need to remain on the same line, not wrap */
+                @apply flex gap-x-1.5;
+
+                &.fi-wrapped,
+                &:is(.fi-wrapped ul) {
+                    /* When wrap is enabled, some badges can remain on the same line as others and some should wrap */
+                    @apply flex-wrap gap-y-1;
+                }
+            }
+        }
+
+        &ul.fi-in-text-has-badges,
+        &.fi-in-text-has-badges ul {
+            &.fi-in-text-has-line-breaks,
+            &:is(.fi-in-text-has-line-breaks ul) {
+                /* Add vertical gap between badges in a list with line breaks */
+                @apply flex flex-col gap-y-1;
+            }
+
+            &:not(ul.fi-in-text-has-line-breaks),
+            &:not(.fi-in-text-has-line-breaks ul) {
+                /* A list of badges without line breaks need to remain on the same line, not wrap */
+                @apply flex gap-x-1.5;
+
+                &.fi-wrapped,
+                &:is(.fi-wrapped ul) {
+                    /* When wrap is enabled, some badges can remain on the same line as others and some should wrap */
+                    @apply flex-wrap gap-y-1;
+                }
+            }
+        }
+
+        &.fi-wrapped:not(.fi-in-text-has-badges.fi-in-text-has-line-breaks) {
+            /* If the content has badges, and they have line breaks, setting `whitespace-normal` sometimes pushes the badge
+             onto the line below the bullet point if there is one, and badge content does not need to wrap anyway. */
+            @apply whitespace-normal;
+
+            & .fi-badge,
+            & .fi-in-text-list-limited-message {
+                /* Badge content and list limited message and actions should not wrap. */
+                @apply whitespace-nowrap;
+            }
+        }
+
+        & > .fi-in-text-list-limited-message {
+            @apply text-sm text-gray-500 dark:text-gray-400;
+        }
+
+        &.fi-align-center {
+            @apply text-center;
+
+            &ul,
+            & ul {
+                @apply justify-center;
+            }
+        }
+
+        &.fi-align-end,
+        &.fi-align-right {
+            @apply text-end;
+
+            &ul,
+            & ul {
+                @apply justify-end;
+            }
+        }
+
+        &.fi-align-justify,
+        &.fi-align-between {
+            @apply text-justify;
+
+            &ul,
+            & ul {
+                @apply justify-between;
+            }
+        }
+    }
+
+    .fi-in-text-item {
+        @apply text-gray-950 dark:text-white;
+
+        & a {
+            @apply hover:underline focus-visible:underline;
+        }
+
+        &.fi-in-text-item-prose {
+            @apply prose dark:prose-invert max-w-none;
+
+            & > *:first-child {
+                @apply mt-0;
+            }
+
+            & > *:last-child {
+                @apply mb-0;
+            }
+        }
+
+        &:not(.fi-bulleted li.fi-in-text-item) {
+            /* Line clamping sets the `display` property of the list item to `-webkit-box` instead of `list-item`, which hides the bullet point. */
+            @apply line-clamp-(--line-clamp,none);
+        }
+
+        &.fi-copyable {
+            @apply cursor-pointer;
+        }
+
+        &.fi-size-xs {
+            @apply text-xs;
+        }
+
+        &.fi-size-sm {
+            @apply text-sm leading-6;
+        }
+
+        &.fi-size-md {
+            @apply text-base;
+        }
+
+        &.fi-size-lg {
+            @apply text-lg;
+        }
+
+        &.fi-font-thin {
+            @apply font-thin;
+        }
+
+        &.fi-font-extralight {
+            @apply font-extralight;
+        }
+
+        &.fi-font-light {
+            @apply font-light;
+        }
+
+        &.fi-font-normal {
+            @apply font-normal;
+        }
+
+        &.fi-font-medium {
+            @apply font-medium;
+        }
+
+        &.fi-font-semibold {
+            @apply font-semibold;
+        }
+
+        &.fi-font-bold {
+            @apply font-bold;
+        }
+
+        &.fi-font-extrabold {
+            @apply font-extrabold;
+        }
+
+        &.fi-font-black {
+            @apply font-black;
+        }
+
+        &.fi-font-sans {
+            @apply font-sans;
+        }
+
+        &.fi-font-serif {
+            @apply font-serif;
+        }
+
+        &.fi-font-mono {
+            @apply font-mono;
+        }
+
+        &.fi-color {
+            @apply text-(--text) dark:text-(--dark-text);
+
+            &li::marker {
+                @apply text-gray-950 dark:text-white;
+            }
+        }
+
+        &.fi-color-gray {
+            @apply text-gray-500 dark:text-gray-400;
+
+            &li::marker {
+                @apply text-gray-950 dark:text-white;
+            }
+        }
+
+        & > .fi-icon {
+            @apply shrink-0 text-gray-400 dark:text-gray-500;
+
+            &.fi-color {
+                @apply text-color-500;
+            }
+        }
+
+        & > .fi-icon {
+            @apply -mt-1 inline-block;
+        }
+    }
+}

packages/infolists/resources/css/index.css

@@ -0,0 +1,7 @@
+@import './components/color.css';
+@import './components/entry.css';
+@import './components/key-value.css';
+@import './components/icon.css';
+@import './components/image.css';
+@import './components/repeatable.css';
+@import './components/text.css';

packages/notifications/resources/css/database-notifications.css

@@ -0,0 +1,35 @@
+@layer components {
+    .fi-no-database {
+        @apply flex;
+
+        & .fi-modal-heading {
+            @apply relative inline-block;
+
+            & .fi-badge {
+                @apply absolute start-full -top-1 ms-1 w-max;
+            }
+        }
+
+        & .fi-modal-header {
+            & .fi-ac {
+                @apply mt-2;
+            }
+        }
+
+        & .fi-modal-content {
+            @apply -mx-6 -mt-6 divide-y divide-gray-200 dark:divide-white/10;
+        }
+
+        & .fi-modal-window:not(.fi-modal-window-has-footer) .fi-modal-content {
+            @apply -mb-6;
+        }
+
+        & .fi-modal-window.fi-modal-window-has-footer .fi-modal-content {
+            @apply border-b border-gray-200 dark:border-white/10;
+        }
+
+        & .fi-no-notification-unread-ctn {
+            @apply before:bg-primary-600 dark:before:bg-primary-500 relative before:absolute before:start-0 before:h-full before:w-0.5;
+        }
+    }
+}

packages/notifications/resources/css/index.css

@@ -0,0 +1,3 @@
+@import './database-notifications.css';
+@import './notification.css';
+@import './notifications.css';

packages/notifications/resources/css/notification.css

@@ -0,0 +1,95 @@
+@layer components {
+    .fi-no-notification {
+        @apply pointer-events-auto invisible flex w-full gap-3 overflow-hidden p-4 transition duration-300;
+
+        & .fi-no-notification-icon {
+            @apply text-gray-400;
+
+            &.fi-color {
+                @apply text-color-400;
+            }
+        }
+
+        & .fi-no-notification-main {
+            @apply mt-0.5 grid flex-1 gap-3;
+        }
+
+        & .fi-no-notification-text {
+            @apply grid gap-1;
+        }
+
+        & .fi-no-notification-title {
+            @apply text-sm font-medium text-gray-950 dark:text-white;
+        }
+
+        & .fi-no-notification-date {
+            @apply text-sm text-gray-500 dark:text-gray-400;
+        }
+
+        & .fi-no-notification-body {
+            @apply overflow-hidden text-sm break-words text-gray-500 dark:text-gray-400;
+        }
+
+        &:not(.fi-inline) {
+            @apply flex max-w-sm gap-3 rounded-xl bg-white p-4 ring-1 shadow-lg ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
+
+            &.fi-color {
+                @apply ring-color-600/20 dark:ring-color-400/30;
+            }
+
+            &.fi-transition-leave-end {
+                @apply scale-95;
+            }
+        }
+
+        &.fi-color {
+            @apply bg-color-50 dark:bg-color-400/10;
+        }
+
+        &.fi-transition-enter-start {
+            @apply opacity-0;
+        }
+
+        &.fi-transition-leave-end {
+            @apply opacity-0;
+        }
+    }
+
+    .fi-no {
+        &.fi-align-start,
+        &.fi-align-left {
+            & .fi-no-notification {
+                &.fi-transition-enter-start {
+                    @apply -translate-x-12;
+                }
+            }
+        }
+
+        &.fi-align-end,
+        &.fi-align-right {
+            & .fi-no-notification {
+                &.fi-transition-enter-start {
+                    @apply translate-x-12;
+                }
+            }
+        }
+
+        &.fi-align-center {
+            &.fi-vertical-align-start {
+                & .fi-no-notification {
+                    &.fi-transition-enter-start {
+                        @apply -translate-y-12;
+                    }
+                }
+            }
+
+            &.fi-vertical-align-end {
+                & .fi-no-notification {
+                    &.fi-transition-enter-start {
+                        @apply translate-y-12;
+                    }
+                }
+            }
+        }
+    }
+}

packages/notifications/resources/css/notifications.css

@@ -0,0 +1,31 @@
+@layer components {
+    .fi-no {
+        @apply pointer-events-none fixed inset-4 z-50 mx-auto flex gap-3;
+
+        &.fi-align-start,
+        &.fi-align-left {
+            @apply items-start;
+        }
+
+        &.fi-align-center {
+            @apply items-center;
+        }
+
+        &.fi-align-end,
+        &.fi-align-right {
+            @apply items-end;
+        }
+
+        &.fi-vertical-align-start {
+            @apply flex-col-reverse justify-end;
+        }
+
+        &.fi-vertical-align-center {
+            @apply flex-col justify-center;
+        }
+
+        &.fi-vertical-align-end {
+            @apply flex-col justify-end;
+        }
+    }
+}

packages/panels/resources/css/base.css

@@ -1,8 +1,10 @@
-:root.dark {
-    color-scheme: dark;
-}
+@layer base {
+    :root.dark {
+        color-scheme: dark;
+    }
 
-/* When scrolling to validation error, do not hide element behind the top bar */
-[data-field-wrapper] {
-    scroll-margin-top: 8rem;
+    /* When scrolling to validation error, do not hide element behind the top bar */
+    [data-field-wrapper] {
+        scroll-margin-top: 8rem;
+    }
 }

packages/panels/resources/css/index.css

@@ -1,7 +1,15 @@
-@import 'tailwindcss' source(none);
-@import '../../../support/resources/css/tailwind.css';
+@import '../../../support/resources/css/index.css';
+@import '../../../actions/resources/css/index.css';
+@import '../../../forms/resources/css/index.css';
+@import '../../../infolists/resources/css/index.css';
+@import '../../../notifications/resources/css/index.css';
+@import '../../../schemas/resources/css/index.css';
+@import '../../../tables/resources/css/index.css';
+@import '../../../widgets/resources/css/index.css';
 
-@import './base.css' layer(base);
+@import './base.css';
+
+@variant dark (&:where(.dark, .dark *));
 
 @theme inline {
     --font-mono: var(--mono-font-family), ui-monospace, SFMono-Regular, Menlo,

packages/panels/resources/css/theme.css

@@ -1,3 +1,3 @@
+@import 'tailwindcss' source(none);
 @import './index.css';
-
-@source '../../../packages';
+@source '../views';

packages/panels/stubs/ThemeCss.stub

@@ -2,4 +2,3 @@
 
 @source '../../../../app/Filament{{ classDirectory }}';
 @source '../../../../resources/views/filament{{ viewDirectory }}';
-@source '../../../../vendor/filament';

packages/schemas/resources/css/components/actions.css

@@ -0,0 +1,31 @@
+@layer components {
+    .fi-sc-actions {
+        @apply flex h-full flex-col gap-2;
+
+        & .fi-sc-actions-label-ctn {
+            @apply flex items-center gap-x-3;
+
+            & .fi-sc-actions-label {
+                @apply text-sm leading-6 font-medium text-gray-950 dark:text-white;
+            }
+        }
+
+        &.fi-sticky {
+            & .fi-ac {
+                @apply fixed bottom-0 -mx-4 w-full transform bg-white p-4 ring-1 shadow-lg ring-gray-950/5 transition md:bottom-4 md:rounded-xl dark:bg-gray-900 dark:ring-white/10;
+            }
+        }
+
+        &.fi-vertical-align-start {
+            @apply justify-start;
+        }
+
+        &.fi-vertical-align-center {
+            @apply justify-center;
+        }
+
+        &.fi-vertical-align-end {
+            @apply justify-end;
+        }
+    }
+}

packages/schemas/resources/css/components/form.css

@@ -0,0 +1,9 @@
+@layer components {
+    .fi-sc-form {
+        @apply flex flex-col gap-6;
+
+        &.fi-dense {
+            @apply gap-3;
+        }
+    }
+}

packages/schemas/resources/css/components/icon.css

@@ -0,0 +1,9 @@
+@layer components {
+    .fi-sc-icon {
+        @apply text-gray-400 dark:text-gray-500;
+
+        &.fi-color {
+            @apply text-color-500 dark:text-color-400;
+        }
+    }
+}

packages/schemas/resources/css/components/image.css

@@ -0,0 +1,14 @@
+@layer components {
+    .fi-sc-icon {
+        @apply rounded-lg border border-gray-300 dark:border-transparent;
+
+        &.fi-align-center {
+            @apply mx-auto;
+        }
+
+        &.fi-align-end,
+        &.fi-align-right {
+            @apply ms-auto;
+        }
+    }
+}

packages/schemas/resources/css/components/section.css

@@ -0,0 +1,13 @@
+@layer components {
+    .fi-sc-section {
+        @apply flex flex-col gap-2;
+
+        & .fi-sc-section-label-ctn {
+            @apply flex items-center gap-x-3;
+
+            & .fi-sc-section-label {
+                @apply text-sm leading-6 font-medium text-gray-950 dark:text-white;
+            }
+        }
+    }
+}

packages/schemas/resources/css/components/split.css

@@ -0,0 +1,85 @@
+@layer components {
+    .fi-sc-split {
+        @apply flex gap-6;
+
+        &.fi-dense {
+            @apply gap-3;
+        }
+
+        & > .fi-growable {
+            @apply w-full flex-1;
+        }
+
+        &.fi-from-default {
+            @apply items-start;
+
+            &.fi-vertical-align-center {
+                @apply items-center;
+            }
+
+            &.fi-vertical-align-end {
+                @apply items-end;
+            }
+        }
+
+        &.fi-from-sm {
+            @apply flex-col sm:flex-row sm:items-start;
+
+            &.fi-vertical-align-center {
+                @apply sm:items-center;
+            }
+
+            &.fi-vertical-align-end {
+                @apply sm:items-end;
+            }
+        }
+
+        &.fi-from-md {
+            @apply flex-col md:flex-row md:items-start;
+
+            &.fi-vertical-align-center {
+                @apply md:items-center;
+            }
+
+            &.fi-vertical-align-end {
+                @apply md:items-end;
+            }
+        }
+
+        &.fi-from-lg {
+            @apply flex-col lg:flex-row lg:items-start;
+
+            &.fi-vertical-align-center {
+                @apply lg:items-center;
+            }
+
+            &.fi-vertical-align-end {
+                @apply lg:items-end;
+            }
+        }
+
+        &.fi-from-xl {
+            @apply flex-col xl:flex-row xl:items-start;
+
+            &.fi-vertical-align-center {
+                @apply xl:items-center;
+            }
+
+            &.fi-vertical-align-end {
+                @apply xl:items-end;
+            }
+        }
+
+        &.fi-from-2xl {
+            @apply flex-col 2xl:flex-row 2xl:items-start;
+
+            &.fi-vertical-align-center {
+                @apply 2xl:items-center;
+            }
+
+            &.fi-vertical-align-end {
+                @apply 2xl:items-end;
+            }
+        }
+    }
+}

packages/schemas/resources/css/components/tabs.css

@@ -0,0 +1,27 @@
+@layer components {
+    .fi-sc-tabs {
+        @apply flex flex-col;
+
+        & .fi-sc-tabs-tab {
+            @apply outline-hidden;
+
+            &.fi-active {
+                @apply mt-6;
+            }
+
+            &:not(.fi-active) {
+                @apply invisible absolute h-0 overflow-hidden p-0;
+            }
+        }
+
+        &.fi-contained {
+            @apply rounded-xl bg-white ring-1 shadow-xs ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
+
+            & .fi-sc-tabs-tab {
+                &.fi-active {
+                    @apply mt-0 p-6;
+                }
+            }
+        }
+    }
+}

packages/schemas/resources/css/components/text.css

@@ -0,0 +1,77 @@
+@layer components {
+    .fi-sc-text {
+        @apply text-sm break-words text-gray-600 dark:text-gray-400;
+
+        &.fi-copyable {
+            @apply cursor-pointer;
+        }
+
+        &.fi-font-thin {
+            @apply font-thin;
+        }
+
+        &.fi-font-extralight {
+            @apply font-extralight;
+        }
+
+        &.fi-font-light {
+            @apply font-light;
+        }
+
+        &.fi-font-normal {
+            @apply font-normal;
+        }
+
+        &.fi-font-medium {
+            @apply font-medium;
+        }
+
+        &.fi-font-semibold {
+            @apply font-semibold;
+        }
+
+        &.fi-font-bold {
+            @apply font-bold;
+        }
+
+        &.fi-font-extrabold {
+            @apply font-extrabold;
+        }
+
+        &.fi-font-black {
+            @apply font-black;
+        }
+
+        &.fi-font-sans {
+            @apply font-sans;
+        }
+
+        &.fi-font-serif {
+            @apply font-serif;
+        }
+
+        &.fi-font-mono {
+            @apply font-mono;
+        }
+
+        &.fi-color-neutral {
+            @apply text-gray-950 dark:text-white;
+        }
+
+        &.fi-color:not(.fi-color-neutral) {
+            @apply text-(--text) dark:text-(--dark-text);
+        }
+
+        &.fi-size-xs {
+            @apply text-xs;
+        }
+
+        &.fi-size-md {
+            @apply text-base;
+        }
+
+        &.fi-size-lg {
+            @apply text-lg;
+        }
+    }
+}

packages/schemas/resources/css/components/unordered-list.css

@@ -0,0 +1,17 @@
+@layer components {
+    .fi-sc-unordered-list {
+        @apply ms-3 list-disc text-sm sm:columns-2;
+
+        &.fi-size-xs {
+            @apply text-xs;
+        }
+
+        &.fi-size-md {
+            @apply text-base;
+        }
+
+        &.fi-size-lg {
+            @apply text-lg;
+        }
+    }
+}

packages/schemas/resources/css/components/wizard.css

@@ -0,0 +1,177 @@
+@layer components {
+    .fi-sc-wizard {
+        @apply flex flex-col;
+
+        & .fi-sc-wizard-header {
+            @apply grid divide-y divide-gray-200 md:grid-flow-col md:divide-y-0 md:overflow-x-auto dark:divide-white/5;
+
+            & .fi-sc-wizard-header-step {
+                @apply relative flex;
+
+                & .fi-sc-wizard-header-step-btn {
+                    @apply flex h-full items-center gap-x-4 px-6 py-4 text-start;
+
+                    & .fi-sc-wizard-header-step-icon-ctn {
+                        @apply flex size-10 shrink-0 items-center justify-center rounded-full;
+
+                        & .fi-sc-wizard-header-step-number {
+                            @apply text-sm font-medium;
+                        }
+                    }
+
+                    & .fi-sc-wizard-header-step-text {
+                        @apply grid justify-items-start md:w-max md:max-w-60;
+
+                        & .fi-sc-wizard-header-step-label {
+                            @apply text-sm font-medium;
+                        }
+
+                        & .fi-sc-wizard-header-step-description {
+                            @apply text-start text-sm text-gray-500 dark:text-gray-400;
+                        }
+                    }
+                }
+
+                & .fi-sc-wizard-header-step-separator {
+                    @apply absolute end-0 hidden h-full w-5 text-gray-200 md:block rtl:rotate-180 dark:text-white/5;
+                }
+
+                &.fi-completed {
+                    & .fi-sc-wizard-header-step-btn {
+                        & .fi-sc-wizard-header-step-icon-ctn {
+                            @apply bg-primary-600 dark:bg-primary-500;
+
+                            & .fi-icon {
+                                @apply text-white;
+                            }
+                        }
+
+                        & .fi-sc-wizard-header-step-text {
+                            & .fi-sc-wizard-header-step-label {
+                                @apply text-gray-950 dark:text-white;
+                            }
+                        }
+                    }
+
+                    &:not(.fi-active) {
+                        & .fi-sc-wizard-header-step-btn {
+                            & .fi-sc-wizard-header-step-icon-ctn {
+                                @apply border-gray-300 dark:border-gray-600;
+                            }
+
+                            & .fi-sc-wizard-header-step-text {
+                                & .fi-sc-wizard-header-step-label {
+                                    @apply text-gray-500 dark:text-gray-400;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                &:not(.fi-completed) {
+                    & .fi-sc-wizard-header-step-btn {
+                        & .fi-sc-wizard-header-step-icon-ctn {
+                            @apply border-2;
+                        }
+                    }
+
+                    &.fi-active {
+                        & .fi-sc-wizard-header-step-btn {
+                            & .fi-sc-wizard-header-step-icon-ctn {
+                                & .fi-icon {
+                                    @apply text-primary-600 dark:text-primary-500;
+                                }
+                            }
+                        }
+                    }
+
+                    &:not(.fi-active) {
+                        & .fi-sc-wizard-header-step-btn {
+                            & .fi-sc-wizard-header-step-icon-ctn {
+                                & .fi-icon {
+                                    @apply text-gray-500 dark:text-gray-400;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                &.fi-active {
+                    & .fi-sc-wizard-header-step-btn {
+                        & .fi-sc-wizard-header-step-icon-ctn {
+                            @apply border-primary-600 dark:border-primary-500;
+
+                            & .fi-sc-wizard-header-step-number {
+                                @apply text-primary-600 dark:text-primary-500;
+                            }
+                        }
+
+                        & .fi-sc-wizard-header-step-text {
+                            & .fi-sc-wizard-header-step-label {
+                                @apply text-primary-700 dark:text-primary-400;
+                            }
+                        }
+                    }
+                }
+
+                &:not(.fi-active) {
+                    & .fi-sc-wizard-header-step-btn {
+                        & .fi-sc-wizard-header-step-icon-ctn {
+                            & .fi-sc-wizard-header-step-number {
+                                @apply text-gray-500 dark:text-gray-400;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        & .fi-sc-wizard-step {
+            @apply outline-hidden;
+
+            &.fi-active {
+                @apply mt-6;
+            }
+
+            &:not(.fi-active) {
+                @apply invisible absolute h-0 overflow-hidden p-0;
+            }
+        }
+
+        & .fi-sc-wizard-footer {
+            @apply flex items-center justify-between gap-x-3;
+
+            & > .fi-hidden {
+                @apply hidden;
+            }
+        }
+
+        &.fi-contained {
+            @apply rounded-xl bg-white ring-1 shadow-xs ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
+
+            & .fi-sc-wizard-header {
+                @apply border-b border-gray-200 dark:border-white/10;
+            }
+
+            & .fi-sc-wizard-step {
+                &.fi-active {
+                    @apply mt-0 p-6;
+                }
+            }
+
+            & .fi-sc-wizard-footer {
+                @apply px-6 pb-6;
+            }
+        }
+
+        &:not(.fi-contained) {
+            & .fi-sc-wizard-header {
+                @apply rounded-xl bg-white ring-1 shadow-xs ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
+            }
+
+            & .fi-sc-wizard-footer {
+                @apply mt-6;
+            }
+        }
+    }
+}

packages/schemas/resources/css/index.css

@@ -0,0 +1,11 @@
+@import './components/actions.css';
+@import './components/form.css';
+@import './components/icon.css';
+@import './components/image.css';
+@import './components/section.css';
+@import './components/split.css';
+@import './components/tabs.css';
+@import './components/text.css';
+@import './components/unordered-list.css';
+@import './components/wizard.css';
+@import './schema.css';

packages/schemas/resources/css/schema.css

@@ -0,0 +1,88 @@
+@layer components {
+    .fi-sc {
+        &.fi-inline {
+            @apply flex grow flex-wrap items-center;
+        }
+
+        &.fi-sc-has-gap {
+            @apply gap-6;
+
+            &.fi-sc-dense {
+                @apply gap-3;
+            }
+        }
+
+        &.fi-align-start,
+        &.fi-align-left {
+            @apply justify-start;
+        }
+
+        &.fi-align-center {
+            @apply justify-center;
+        }
+
+        &.fi-align-end,
+        &.fi-align-right {
+            @apply justify-end;
+        }
+
+        &.fi-align-between,
+        &.fi-align-justify {
+            @apply justify-between;
+        }
+
+        & > .fi-hidden {
+            @apply hidden;
+        }
+
+        & > .fi-grid-col {
+            &.fi-width-xs {
+                @apply max-w-xs;
+            }
+
+            &.fi-width-sm {
+                @apply max-w-sm;
+            }
+
+            &.fi-width-md {
+                @apply max-w-md;
+            }
+
+            &.fi-width-lg {
+                @apply max-w-lg;
+            }
+
+            &.fi-width-xl {
+                @apply max-w-xl;
+            }
+
+            &.fi-width-2xl {
+                @apply max-w-2xl;
+            }
+
+            &.fi-width-3xl {
+                @apply max-w-3xl;
+            }
+
+            &.fi-width-4xl {
+                @apply max-w-4xl;
+            }
+
+            &.fi-width-5xl {
+                @apply max-w-5xl;
+            }
+
+            &.fi-width-6xl {
+                @apply max-w-6xl;
+            }
+
+            &.fi-width-7xl {
+                @apply max-w-7xl;
+            }
+
+            & > .fi-sc-component {
+                @apply h-full;
+            }
+        }
+    }
+}

packages/support/resources/css/components/actions.css

@@ -1,30 +0,0 @@
-.fi-ac {
-    @apply gap-3;
-
-    &:not(.fi-width-full) {
-        @apply flex flex-wrap items-center;
-
-        &.fi-align-start,
-        &.fi-align-left {
-            @apply justify-start;
-        }
-
-        &.fi-align-center {
-            @apply justify-center;
-        }
-
-        &.fi-align-end,
-        &.fi-align-right {
-            @apply flex-row-reverse;
-        }
-
-        &.fi-align-between,
-        &.fi-align-justify {
-            @apply justify-between;
-        }
-    }
-
-    &.fi-width-full {
-        @apply grid grid-cols-[repeat(auto-fit,minmax(0,1fr))];
-    }
-}

packages/support/resources/css/components/avatar.css

@@ -1,15 +1,17 @@
-.fi-avatar {
-    @apply size-8 rounded-md object-cover object-center;
+@layer components {
+    .fi-avatar {
+        @apply size-8 rounded-md object-cover object-center;
 
-    &.fi-circular {
-        @apply rounded-full;
-    }
+        &.fi-circular {
+            @apply rounded-full;
+        }
 
-    &.fi-size-sm {
-        @apply size-6;
-    }
+        &.fi-size-sm {
+            @apply size-6;
+        }
 
-    &.fi-size-lg {
-        @apply size-10;
+        &.fi-size-lg {
+            @apply size-10;
+        }
     }
 }

packages/support/resources/css/components/badge.css

@@ -1,62 +1,64 @@
-.fi-badge {
-    @apply inline-flex min-w-[theme(spacing.6)] items-center justify-center gap-x-1 truncate rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-gray-600/10 ring-inset dark:bg-gray-400/10 dark:text-gray-200 dark:ring-gray-400/20;
+@layer components {
+    .fi-badge {
+        @apply inline-flex min-w-[theme(spacing.6)] items-center justify-center gap-x-1 truncate rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-gray-600/10 ring-inset dark:bg-gray-400/10 dark:text-gray-200 dark:ring-gray-400/20;
 
-    &.fi-disabled,
-    &[disabled] {
-        @apply cursor-default opacity-70;
+        &.fi-disabled,
+        &[disabled] {
+            @apply cursor-default opacity-70;
 
-        &:not([x-tooltip]) {
-            @apply pointer-events-none;
+            &:not([x-tooltip]) {
+                @apply pointer-events-none;
+            }
         }
-    }
 
-    & .fi-badge-label-ctn {
-        @apply grid;
-    }
+        & .fi-badge-label-ctn {
+            @apply grid;
+        }
 
-    & .fi-badge-label {
-        @apply truncate;
-    }
-
-    & .fi-icon {
-        @apply shrink-0 text-gray-400 dark:text-gray-500;
-    }
-
-    &.fi-size-xs {
-        @apply min-w-[theme(spacing.4)] px-0.5 tracking-tighter;
-    }
-
-    &.fi-size-sm {
-        @apply min-w-[theme(spacing.5)] px-1.5 py-0.5 tracking-tight;
-    }
-
-    &.fi-color {
-        @apply bg-color-50 ring-color-600/10 dark:bg-color-400/10 dark:ring-color-400/30 text-(--text) dark:text-(--dark-text);
+        & .fi-badge-label {
+            @apply truncate;
+        }
 
         & .fi-icon {
-            @apply text-color-500;
+            @apply shrink-0 text-gray-400 dark:text-gray-500;
         }
 
-        & .fi-badge-delete-btn > .fi-icon {
-            @apply text-color-700/50 dark:text-color-300/50;
-        }
-    }
-
-    & .fi-badge-delete-btn {
-        @apply -my-1 -ms-1 -me-2 flex items-center justify-center p-1 transition duration-75 outline-none;
-
-        & > .fi-icon {
-            @apply text-gray-700/50 dark:text-gray-300/50;
-        }
-    }
-
-    &:not(.fi-disabled):not([disabled]) {
-        & .fi-badge-delete-btn > .fi-icon {
-            @apply focus-visible:text-gray-700/75 dark:hover:text-gray-300/75 dark:focus-visible:text-gray-300/75;
+        &.fi-size-xs {
+            @apply min-w-[theme(spacing.4)] px-0.5 tracking-tighter;
         }
 
-        &.fi-color .fi-badge-delete-btn > .fi-icon {
-            @apply hover:text-color-700/75 focus-visible:text-color-700/75 dark:hover:text-color-300/75 dark:focus-visible:text-color-300/75;
+        &.fi-size-sm {
+            @apply min-w-[theme(spacing.5)] px-1.5 py-0.5 tracking-tight;
+        }
+
+        &.fi-color {
+            @apply bg-color-50 ring-color-600/10 dark:bg-color-400/10 dark:ring-color-400/30 text-(--text) dark:text-(--dark-text);
+
+            & .fi-icon {
+                @apply text-color-500;
+            }
+
+            & .fi-badge-delete-btn > .fi-icon {
+                @apply text-color-700/50 dark:text-color-300/50;
+            }
+        }
+
+        & .fi-badge-delete-btn {
+            @apply -my-1 -ms-1 -me-2 flex items-center justify-center p-1 transition duration-75 outline-none;
+
+            & > .fi-icon {
+                @apply text-gray-700/50 dark:text-gray-300/50;
+            }
+        }
+
+        &:not(.fi-disabled):not([disabled]) {
+            & .fi-badge-delete-btn > .fi-icon {
+                @apply focus-visible:text-gray-700/75 dark:hover:text-gray-300/75 dark:focus-visible:text-gray-300/75;
+            }
+
+            &.fi-color .fi-badge-delete-btn > .fi-icon {
+                @apply hover:text-color-700/75 focus-visible:text-color-700/75 dark:hover:text-color-300/75 dark:focus-visible:text-color-300/75;
+            }
         }
     }
 }

packages/support/resources/css/components/breadcrumbs.css

@@ -1,23 +1,25 @@
-.fi-breadcrumbs {
-    & ol {
-        @apply flex flex-wrap items-center gap-x-2;
+@layer components {
+    .fi-breadcrumbs {
+        & ol {
+            @apply flex flex-wrap items-center gap-x-2;
 
-        & li {
-            @apply flex items-center gap-x-2 text-sm font-medium text-gray-500 dark:text-gray-400;
+            & li {
+                @apply flex items-center gap-x-2 text-sm font-medium text-gray-500 dark:text-gray-400;
 
-            & a {
-                @apply transition duration-75 hover:text-gray-700 dark:hover:text-gray-200;
-            }
-
-            & .fi-icon {
-                @apply flex text-gray-400 dark:text-gray-500;
-
-                &.fi-ltr {
-                    @apply rtl:hidden;
+                & a {
+                    @apply transition duration-75 hover:text-gray-700 dark:hover:text-gray-200;
                 }
 
-                &.fi-rtl {
-                    @apply ltr:hidden;
+                & .fi-icon {
+                    @apply flex text-gray-400 dark:text-gray-500;
+
+                    &.fi-ltr {
+                        @apply rtl:hidden;
+                    }
+
+                    &.fi-rtl {
+                        @apply ltr:hidden;
+                    }
                 }
             }
         }

packages/support/resources/css/components/button.css

@@ -1,188 +1,190 @@
-.fi-btn {
-    @apply relative inline-grid grid-flow-col items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium transition duration-75 outline-none;
-
-    &:not(.fi-disabled):not([disabled]) {
-        @apply focus-visible:ring-2;
-    }
-
-    &.fi-disabled,
-    &[disabled] {
-        @apply cursor-default opacity-70;
-
-        &:not([x-tooltip]) {
-            @apply pointer-events-none;
-        }
-    }
-
-    & > .fi-icon {
-        @apply text-gray-400 transition duration-75 dark:text-gray-500;
-    }
-
-    &.fi-size-xs {
-        @apply gap-1 px-2 py-1.5 text-xs;
-    }
-
-    &.fi-size-sm {
-        @apply gap-1 px-2.5 py-1.5 text-sm;
-    }
-
-    &.fi-size-lg {
-        @apply gap-1.5 px-3.5 py-2.5 text-sm;
-    }
-
-    &.fi-size-xl {
-        @apply gap-1.5 px-4 py-3 text-sm;
-    }
-
-    &.fi-outlined {
-        @apply text-gray-950 ring-1 shadow-sm ring-gray-300 dark:text-white dark:ring-gray-700;
+@layer components {
+    .fi-btn {
+        @apply relative inline-grid grid-flow-col items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium transition duration-75 outline-none;
 
         &:not(.fi-disabled):not([disabled]) {
-            @apply hover:bg-gray-400/10 focus-visible:ring-gray-400/40;
+            @apply focus-visible:ring-2;
         }
 
-        &.fi-color {
-            @apply ring-color-600 dark:ring-color-500 text-(--text) dark:text-(--dark-text);
+        &.fi-disabled,
+        &[disabled] {
+            @apply cursor-default opacity-70;
+
+            &:not([x-tooltip]) {
+                @apply pointer-events-none;
+            }
+        }
+
+        & > .fi-icon {
+            @apply text-gray-400 transition duration-75 dark:text-gray-500;
+        }
+
+        &.fi-size-xs {
+            @apply gap-1 px-2 py-1.5 text-xs;
+        }
+
+        &.fi-size-sm {
+            @apply gap-1 px-2.5 py-1.5 text-sm;
+        }
+
+        &.fi-size-lg {
+            @apply gap-1.5 px-3.5 py-2.5 text-sm;
+        }
+
+        &.fi-size-xl {
+            @apply gap-1.5 px-4 py-3 text-sm;
+        }
+
+        &.fi-outlined {
+            @apply text-gray-950 ring-1 shadow-sm ring-gray-300 dark:text-white dark:ring-gray-700;
 
             &:not(.fi-disabled):not([disabled]) {
-                @apply focus-visible:ring-color-500/40 dark:focus-visible:ring-color-400/40 hover:bg-color-500/10 dark:hover:bg-color-600/10;
+                @apply hover:bg-gray-400/10 focus-visible:ring-gray-400/40;
             }
 
-            & > .fi-icon {
-                @apply text-color-600 dark:text-color-400;
-            }
-        }
-    }
-
-    &:not(.fi-outlined) {
-        @apply bg-white text-gray-950 dark:bg-white/5 dark:text-white;
-
-        &:not(.fi-disabled):not([disabled]) {
-            @apply hover:bg-gray-50 dark:hover:bg-white/10;
-        }
-
-        input:checked + &label {
-            @apply bg-gray-400 text-white ring-0 dark:bg-gray-600;
-
-            &:not(.fi-disabled):not([disabled]) {
-                @apply hover:bg-gray-300 dark:hover:bg-gray-500;
-            }
-        }
-
-        &.fi-color {
-            &:not(label) {
-                @apply bg-(--bg) text-(--text) dark:bg-(--dark-bg) dark:text-(--dark-text);
+            &.fi-color {
+                @apply ring-color-600 dark:ring-color-500 text-(--text) dark:text-(--dark-text);
 
                 &:not(.fi-disabled):not([disabled]) {
-                    @apply focus-visible:ring-color-500/50 dark:focus-visible:ring-color-400/50 hover:bg-(--hover-bg) hover:text-(--hover-text) dark:hover:bg-(--dark-hover-bg) dark:hover:text-(--dark-hover-text);
+                    @apply focus-visible:ring-color-500/40 dark:focus-visible:ring-color-400/40 hover:bg-color-500/10 dark:hover:bg-color-600/10;
                 }
 
                 & > .fi-icon {
-                    @apply text-(--text) dark:text-(--dark-text);
+                    @apply text-color-600 dark:text-color-400;
                 }
             }
-
-            &label {
-                input:checked + & {
-                    @apply bg-(--bg) text-(--text) ring-0 dark:bg-(--dark-bg) dark:text-(--dark-text);
-                }
-
-                &:not(.fi-disabled):not([disabled]) {
-                    input:checked + & {
-                        @apply hover:bg-(--hover-bg) hover:text-(--hover-text) dark:hover:bg-(--dark-hover-bg) dark:hover:text-(--dark-hover-text);
-                    }
-
-                    input:focus-visible + & {
-                        @apply z-10 ring-2 ring-gray-950/10 dark:ring-white/20;
-                    }
-
-                    input:checked:focus-visible + & {
-                        @apply ring-color-500/50 dark:ring-color-400/50;
-                    }
-                }
-            }
-        }
-    }
-
-    &label {
-        @apply cursor-pointer;
-
-        & > .fi-icon:is(:checked + label > .fi-icon) {
-            @apply text-(--text) dark:text-(--dark-text);
-        }
-    }
-
-    &:not(.fi-color),
-    &label {
-        @apply ring-1 ring-gray-950/10 dark:ring-white/20;
-    }
-
-    &.fi-labeled-from-sm,
-    &.fi-labeled-from-md,
-    &.fi-labeled-from-lg,
-    &.fi-labeled-from-xl,
-    &.fi-labeled-from-2xl {
-        @apply hidden;
-    }
-
-    &.fi-labeled-from-sm {
-        @apply sm:inline-grid;
-    }
-
-    &.fi-labeled-from-md {
-        @apply md:inline-grid;
-    }
-
-    &.fi-labeled-from-lg {
-        @apply lg:inline-grid;
-    }
-
-    &.fi-labeled-from-xl {
-        @apply xl:inline-grid;
-    }
-
-    &.fi-labeled-from-2xl {
-        @apply 2xl:inline-grid;
-    }
-
-    & .fi-btn-badge-ctn {
-        @apply absolute start-full top-0 z-[1] w-max -translate-x-1/2 -translate-y-1/2 rounded-md bg-white rtl:translate-x-1/2 dark:bg-gray-900;
-    }
-}
-
-.fi-btn-group {
-    @apply grid grid-flow-col rounded-lg ring-1 shadow-sm ring-gray-950/10 dark:ring-white/20;
-
-    & > .fi-btn {
-        @apply flex-1 rounded-none;
-
-        &:nth-child(1 of .fi-btn) {
-            @apply rounded-s-lg;
-        }
-
-        &:nth-last-child(1 of .fi-btn) {
-            @apply rounded-e-lg;
-        }
-
-        &:not(:nth-child(1 of .fi-btn)) {
-            @apply shadow-[-1px_0_0_0_var(--color-gray-200)] dark:shadow-[-1px_0_0_0_rgba(255,255,255,0.2)];
-        }
-
-        &:not(:nth-last-child(1 of .fi-btn)) {
-            @apply me-px;
-        }
-
-        &.fi-processing:enabled {
-            @apply cursor-wait opacity-70;
         }
 
         &:not(.fi-outlined) {
-            @apply shadow-none;
+            @apply bg-white text-gray-950 dark:bg-white/5 dark:text-white;
+
+            &:not(.fi-disabled):not([disabled]) {
+                @apply hover:bg-gray-50 dark:hover:bg-white/10;
+            }
+
+            input:checked + &label {
+                @apply bg-gray-400 text-white ring-0 dark:bg-gray-600;
+
+                &:not(.fi-disabled):not([disabled]) {
+                    @apply hover:bg-gray-300 dark:hover:bg-gray-500;
+                }
+            }
+
+            &.fi-color {
+                &:not(label) {
+                    @apply bg-(--bg) text-(--text) dark:bg-(--dark-bg) dark:text-(--dark-text);
+
+                    &:not(.fi-disabled):not([disabled]) {
+                        @apply focus-visible:ring-color-500/50 dark:focus-visible:ring-color-400/50 hover:bg-(--hover-bg) hover:text-(--hover-text) dark:hover:bg-(--dark-hover-bg) dark:hover:text-(--dark-hover-text);
+                    }
+
+                    & > .fi-icon {
+                        @apply text-(--text) dark:text-(--dark-text);
+                    }
+                }
+
+                &label {
+                    input:checked + & {
+                        @apply bg-(--bg) text-(--text) ring-0 dark:bg-(--dark-bg) dark:text-(--dark-text);
+                    }
+
+                    &:not(.fi-disabled):not([disabled]) {
+                        input:checked + & {
+                            @apply hover:bg-(--hover-bg) hover:text-(--hover-text) dark:hover:bg-(--dark-hover-bg) dark:hover:text-(--dark-hover-text);
+                        }
+
+                        input:focus-visible + & {
+                            @apply z-10 ring-2 ring-gray-950/10 dark:ring-white/20;
+                        }
+
+                        input:checked:focus-visible + & {
+                            @apply ring-color-500/50 dark:ring-color-400/50;
+                        }
+                    }
+                }
+            }
+        }
+
+        &label {
+            @apply cursor-pointer;
+
+            & > .fi-icon:is(:checked + label > .fi-icon) {
+                @apply text-(--text) dark:text-(--dark-text);
+            }
         }
 
         &:not(.fi-color),
         &label {
-            @apply ring-0;
+            @apply ring-1 ring-gray-950/10 dark:ring-white/20;
+        }
+
+        &.fi-labeled-from-sm,
+        &.fi-labeled-from-md,
+        &.fi-labeled-from-lg,
+        &.fi-labeled-from-xl,
+        &.fi-labeled-from-2xl {
+            @apply hidden;
+        }
+
+        &.fi-labeled-from-sm {
+            @apply sm:inline-grid;
+        }
+
+        &.fi-labeled-from-md {
+            @apply md:inline-grid;
+        }
+
+        &.fi-labeled-from-lg {
+            @apply lg:inline-grid;
+        }
+
+        &.fi-labeled-from-xl {
+            @apply xl:inline-grid;
+        }
+
+        &.fi-labeled-from-2xl {
+            @apply 2xl:inline-grid;
+        }
+
+        & .fi-btn-badge-ctn {
+            @apply absolute start-full top-0 z-[1] w-max -translate-x-1/2 -translate-y-1/2 rounded-md bg-white rtl:translate-x-1/2 dark:bg-gray-900;
+        }
+    }
+
+    .fi-btn-group {
+        @apply grid grid-flow-col rounded-lg ring-1 shadow-sm ring-gray-950/10 dark:ring-white/20;
+
+        & > .fi-btn {
+            @apply flex-1 rounded-none;
+
+            &:nth-child(1 of .fi-btn) {
+                @apply rounded-s-lg;
+            }
+
+            &:nth-last-child(1 of .fi-btn) {
+                @apply rounded-e-lg;
+            }
+
+            &:not(:nth-child(1 of .fi-btn)) {
+                @apply shadow-[-1px_0_0_0_var(--color-gray-200)] dark:shadow-[-1px_0_0_0_rgba(255,255,255,0.2)];
+            }
+
+            &:not(:nth-last-child(1 of .fi-btn)) {
+                @apply me-px;
+            }
+
+            &.fi-processing:enabled {
+                @apply cursor-wait opacity-70;
+            }
+
+            &:not(.fi-outlined) {
+                @apply shadow-none;
+            }
+
+            &:not(.fi-color),
+            &label {
+                @apply ring-0;
+            }
         }
     }
 }

packages/support/resources/css/components/dropdown/header.css

@@ -1,21 +1,23 @@
-.fi-dropdown-header {
-    @apply flex w-full gap-2 p-3 text-sm font-medium;
+@layer components {
+    .fi-dropdown-header {
+        @apply flex w-full gap-2 p-3 text-sm font-medium;
 
-    & .fi-icon {
-        @apply text-gray-400 dark:text-gray-500;
-    }
-
-    & span {
-        @apply flex-1 truncate text-start text-gray-700 dark:text-gray-200;
-    }
-
-    &.fi-color {
         & .fi-icon {
-            @apply text-color-500 dark:text-color-400;
+            @apply text-gray-400 dark:text-gray-500;
         }
 
         & span {
-            @apply text-(--text) dark:text-(--dark-text);
+            @apply flex-1 truncate text-start text-gray-700 dark:text-gray-200;
+        }
+
+        &.fi-color {
+            & .fi-icon {
+                @apply text-color-500 dark:text-color-400;
+            }
+
+            & span {
+                @apply text-(--text) dark:text-(--dark-text);
+            }
         }
     }
 }

packages/support/resources/css/components/dropdown/index.css

@@ -1,65 +1,67 @@
-.fi-dropdown {
-    & .fi-dropdown-trigger {
-        @apply flex cursor-pointer;
-    }
-
-    & .fi-dropdown-panel {
-        @apply absolute z-10 w-screen divide-y divide-gray-100 rounded-lg bg-white ring-1 shadow-lg ring-gray-950/5 transition dark:divide-white/5 dark:bg-gray-900 dark:ring-white/10;
-
-        &.fi-opacity-0 {
-            @apply opacity-0;
+@layer components {
+    .fi-dropdown {
+        & .fi-dropdown-trigger {
+            @apply flex cursor-pointer;
         }
 
-        &.fi-width-default {
-            @apply max-w-[14rem]!;
-        }
+        & .fi-dropdown-panel {
+            @apply absolute z-10 w-screen divide-y divide-gray-100 rounded-lg bg-white ring-1 shadow-lg ring-gray-950/5 transition dark:divide-white/5 dark:bg-gray-900 dark:ring-white/10;
 
-        &.fi-width-xs {
-            @apply max-w-xs!;
-        }
+            &.fi-opacity-0 {
+                @apply opacity-0;
+            }
 
-        &.fi-width-sm {
-            @apply max-w-sm!;
-        }
+            &.fi-width-default {
+                @apply max-w-[14rem]!;
+            }
 
-        &.fi-width-md {
-            @apply max-w-md!;
-        }
+            &.fi-width-xs {
+                @apply max-w-xs!;
+            }
 
-        &.fi-width-lg {
-            @apply max-w-lg!;
-        }
+            &.fi-width-sm {
+                @apply max-w-sm!;
+            }
 
-        &.fi-width-xl {
-            @apply max-w-xl!;
-        }
+            &.fi-width-md {
+                @apply max-w-md!;
+            }
 
-        &.fi-width-2xl {
-            @apply max-w-2xl!;
-        }
+            &.fi-width-lg {
+                @apply max-w-lg!;
+            }
 
-        &.fi-width-3xl {
-            @apply max-w-3xl!;
-        }
+            &.fi-width-xl {
+                @apply max-w-xl!;
+            }
 
-        &.fi-width-4xl {
-            @apply max-w-4xl!;
-        }
+            &.fi-width-2xl {
+                @apply max-w-2xl!;
+            }
 
-        &.fi-width-5xl {
-            @apply max-w-5xl!;
-        }
+            &.fi-width-3xl {
+                @apply max-w-3xl!;
+            }
 
-        &.fi-width-6xl {
-            @apply max-w-6xl!;
-        }
+            &.fi-width-4xl {
+                @apply max-w-4xl!;
+            }
 
-        &.fi-width-7xl {
-            @apply max-w-7xl!;
-        }
+            &.fi-width-5xl {
+                @apply max-w-5xl!;
+            }
 
-        &.fi-scrollable {
-            @apply overflow-y-auto;
+            &.fi-width-6xl {
+                @apply max-w-6xl!;
+            }
+
+            &.fi-width-7xl {
+                @apply max-w-7xl!;
+            }
+
+            &.fi-scrollable {
+                @apply overflow-y-auto;
+            }
         }
     }
 }

packages/support/resources/css/components/dropdown/list/index.css

@@ -1,3 +1,5 @@
-.fi-dropdown-list {
-    @apply p-1;
+@layer components {
+    .fi-dropdown-list {
+        @apply p-1;
+    }
 }

packages/support/resources/css/components/dropdown/list/item.css

@@ -1,50 +1,52 @@
-.fi-dropdown-list-item {
-    @apply flex w-full items-center gap-2 rounded-md p-2 text-sm whitespace-nowrap transition-colors duration-75 outline-none;
+@layer components {
+    .fi-dropdown-list-item {
+        @apply flex w-full items-center gap-2 rounded-md p-2 text-sm whitespace-nowrap transition-colors duration-75 outline-none;
 
-    &:not(.fi-disabled):not([disabled]) {
-        @apply hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;
-    }
-
-    &.fi-disabled,
-    &[disabled] {
-        @apply cursor-default opacity-70;
-
-        &:not([x-tooltip]) {
-            @apply pointer-events-none;
-        }
-    }
-
-    & .fi-icon {
-        @apply transition duration-75;
-    }
-
-    & .fi-dropdown-list-item-image {
-        @apply size-5 rounded-full bg-cover bg-center;
-    }
-
-    & .fi-dropdown-list-item-label {
-        @apply flex-1 truncate text-start text-gray-700 dark:text-gray-200;
-    }
-
-    & > .fi-icon {
-        @apply text-gray-400 dark:text-gray-500;
-
-        &.fi-color {
-            @apply text-color-500 dark:text-color-400;
-        }
-    }
-
-    &.fi-color {
         &:not(.fi-disabled):not([disabled]) {
-            @apply hover:bg-color-50 focus-visible:bg-color-50 dark:hover:bg-color-400/10 dark:focus-visible:bg-color-400/10;
+            @apply hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;
+        }
+
+        &.fi-disabled,
+        &[disabled] {
+            @apply cursor-default opacity-70;
+
+            &:not([x-tooltip]) {
+                @apply pointer-events-none;
+            }
+        }
+
+        & .fi-icon {
+            @apply transition duration-75;
+        }
+
+        & .fi-dropdown-list-item-image {
+            @apply size-5 rounded-full bg-cover bg-center;
         }
 
         & .fi-dropdown-list-item-label {
-            @apply text-(--text) hover:text-(--hover-text) dark:text-(--dark-text) dark:hover:text-(--dark-hover-text);
+            @apply flex-1 truncate text-start text-gray-700 dark:text-gray-200;
+        }
+
+        & > .fi-icon {
+            @apply text-gray-400 dark:text-gray-500;
+
+            &.fi-color {
+                @apply text-color-500 dark:text-color-400;
+            }
+        }
+
+        &.fi-color {
+            &:not(.fi-disabled):not([disabled]) {
+                @apply hover:bg-color-50 focus-visible:bg-color-50 dark:hover:bg-color-400/10 dark:focus-visible:bg-color-400/10;
+            }
+
+            & .fi-dropdown-list-item-label {
+                @apply text-(--text) hover:text-(--hover-text) dark:text-(--dark-text) dark:hover:text-(--dark-hover-text);
+            }
+        }
+
+        & .fi-badge {
+            @apply min-w-[theme(spacing.5)] px-1.5 py-0.5 tracking-tight;
         }
     }
-
-    & .fi-badge {
-        @apply min-w-[theme(spacing.5)] px-1.5 py-0.5 tracking-tight;
-    }
 }

packages/support/resources/css/components/fieldset.css

@@ -1,13 +1,15 @@
-.fi-fieldset {
-    @apply rounded-xl border border-gray-200 p-6 dark:border-white/10;
+@layer components {
+    .fi-fieldset {
+        @apply rounded-xl border border-gray-200 p-6 dark:border-white/10;
 
-    & > legend {
-        @apply -ms-2 px-2 text-sm leading-6 font-medium text-gray-950 dark:text-white;
-    }
-
-    &.fi-fieldset-label-hidden {
         & > legend {
-            @apply sr-only;
+            @apply -ms-2 px-2 text-sm leading-6 font-medium text-gray-950 dark:text-white;
+        }
+
+        &.fi-fieldset-label-hidden {
+            & > legend {
+                @apply sr-only;
+            }
         }
     }
 }

packages/support/resources/css/components/forms/components/builder.css

@@ -1,135 +0,0 @@
-.fi-fo-builder {
-    @apply grid gap-y-4;
-
-    & .fi-fo-builder-actions {
-        @apply flex gap-x-3;
-
-        &.fi-hidden {
-            @apply hidden;
-        }
-    }
-
-    & .fi-fo-builder-items {
-        @apply grid gap-4;
-    }
-
-    & .fi-fo-builder-item {
-        @apply rounded-xl bg-white ring-1 shadow-xs ring-gray-950/5 dark:bg-white/5 dark:ring-white/10;
-
-        &.fi-collapsed {
-            @apply overflow-hidden;
-
-            & .fi-fo-builder-item-header-collapsible-actions {
-                @apply -rotate-180;
-            }
-
-            & .fi-fo-builder-item-header-collapse-action {
-                @apply pointer-events-none opacity-0;
-            }
-        }
-
-        &:not(.fi-collapsed) {
-            & .fi-fo-builder-item-header-expand-action {
-                @apply pointer-events-none opacity-0;
-            }
-        }
-    }
-
-    & .fi-fo-builder-item-header {
-        @apply flex items-center gap-x-3 overflow-hidden px-4 py-3;
-    }
-
-    &.fi-collapsible {
-        & .fi-fo-builder-item-header {
-            @apply cursor-pointer select-none;
-        }
-    }
-
-    & .fi-fo-builder-item-header-start-actions {
-        @apply flex items-center gap-x-3;
-    }
-
-    & .fi-fo-builder-item-header-icon {
-        @apply text-gray-400 dark:text-gray-500;
-    }
-
-    & .fi-fo-builder-item-header-label {
-        @apply text-sm font-medium text-gray-950 dark:text-white;
-
-        &.fi-truncated {
-            @apply truncate;
-        }
-    }
-
-    & .fi-fo-builder-item-header-end-actions {
-        @apply ms-auto flex items-center gap-x-3;
-    }
-
-    & .fi-fo-builder-item-header-collapsible-actions {
-        @apply relative transition;
-    }
-
-    & .fi-fo-builder-item-header-collapse-action {
-        @apply transition;
-    }
-
-    & .fi-fo-builder-item-header-expand-action {
-        @apply absolute inset-0 rotate-180 transition;
-    }
-
-    & .fi-fo-builder-item-content {
-        @apply relative border-t border-gray-100 dark:border-white/10;
-
-        &:not(.fi-fo-builder-item-content-has-preview) {
-            @apply p-4;
-        }
-    }
-
-    & .fi-fo-builder-item-preview {
-        &:not(.fi-interactive) {
-            @apply pointer-events-none;
-        }
-    }
-
-    & .fi-fo-builder-item-preview-edit-overlay {
-        @apply absolute inset-0 z-1 cursor-pointer;
-    }
-
-    & .fi-fo-builder-add-between-items-ctn {
-        @apply relative -top-2 mt-0! h-0;
-    }
-
-    & .fi-fo-builder-add-between-items {
-        @apply flex w-full justify-center opacity-0 transition duration-75 hover:opacity-100;
-    }
-
-    & .fi-fo-builder-block-picker-ctn {
-        @apply rounded-lg bg-white dark:bg-gray-900;
-    }
-
-    & .fi-fo-builder-label-between-items-ctn {
-        @apply relative border-t border-gray-200 dark:border-white/10;
-    }
-
-    & .fi-fo-builder-label-between-items {
-        @apply absolute -top-3 left-3 px-1 text-sm font-medium;
-    }
-
-    & .fi-fo-builder-block-picker {
-        @apply flex;
-
-        &.fi-align-start,
-        &.fi-align-left {
-            @apply justify-start;
-        }
-
-        &.fi-align-center {
-            @apply justify-center;
-        }
-
-        &.fi-align-end,
-        &.fi-align-right {
-            @apply justify-end;
-        }
-    }
-}

packages/support/resources/css/components/forms/components/checkbox-list.css

@@ -1,45 +0,0 @@
-.fi-fo-checkbox-list {
-    & .fi-fo-checkbox-list-search-input-wrp {
-        @apply mb-4;
-    }
-
-    & .fi-fo-checkbox-list-actions {
-        @apply mb-2;
-    }
-
-    & .fi-fo-checkbox-list-options {
-        @apply gap-4;
-
-        &.fi-grid-direction-col {
-            @apply -mt-4;
-
-            & .fi-fo-checkbox-list-option-ctn {
-                @apply break-inside-avoid pt-4;
-            }
-        }
-    }
-
-    & .fi-fo-checkbox-list-option {
-        @apply flex gap-x-3;
-
-        & .fi-checkbox-input {
-            @apply mt-1;
-        }
-
-        & .fi-fo-checkbox-list-option-text {
-            @apply grid text-sm leading-6;
-        }
-
-        & .fi-fo-checkbox-list-option-label {
-            @apply overflow-hidden font-medium break-words text-gray-950 dark:text-white;
-        }
-
-        & .fi-fo-checkbox-list-option-description {
-            @apply text-gray-500 dark:text-gray-400;
-        }
-    }
-
-    & .fi-fo-checkbox-list-no-search-results-message {
-        @apply text-sm text-gray-500 dark:text-gray-400;
-    }
-}

packages/support/resources/css/components/forms/components/color-picker.css

@@ -1,17 +0,0 @@
-.fi-fo-color-picker {
-    & .fi-input-wrp-content {
-        @apply flex;
-    }
-
-    & .fi-fo-color-picker-preview {
-        @apply my-auto me-3 size-5 shrink-0 rounded-full select-none;
-
-        &.fi-empty {
-            @apply ring-1 ring-gray-200 ring-inset dark:ring-white/10;
-        }
-    }
-
-    & .fi-fo-color-picker-panel {
-        @apply absolute z-10 hidden rounded-lg shadow-lg;
-    }
-}

packages/support/resources/css/components/forms/components/date-time-picker.css

@@ -1,88 +0,0 @@
-.fi-fo-date-time-picker {
-    /* Prevent excessive date input height in WebKit */
-    /* https://github.com/twbs/bootstrap/issues/34433 */
-    & input::-webkit-datetime-edit {
-        display: block;
-        padding: 0;
-    }
-
-    & .fi-fo-date-time-picker-trigger {
-        @apply w-full;
-    }
-
-    & .fi-fo-date-time-picker-display-text-input {
-        @apply w-full border-none bg-transparent px-3 py-1.5 text-base text-gray-950 outline-hidden transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:var(--color-gray-500)] sm:text-sm sm:leading-6 dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:var(--color-gray-400)];
-    }
-
-    & .fi-fo-date-time-picker-panel {
-        @apply absolute z-10 space-y-3 rounded-lg bg-white p-4 ring-1 shadow-lg ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
-
-        & .fi-fo-date-time-picker-panel-header {
-            @apply flex items-center justify-between;
-        }
-    }
-
-    & .fi-fo-date-time-picker-month-select {
-        @apply grow cursor-pointer border-none bg-transparent p-0 text-sm font-medium text-gray-950 focus:ring-0 dark:bg-gray-900 dark:text-white;
-    }
-
-    & .fi-fo-date-time-picker-year-input {
-        @apply w-16 border-none bg-transparent p-0 text-right text-sm text-gray-950 focus:ring-0 dark:text-white;
-    }
-
-    & .fi-fo-date-time-picker-calendar-header {
-        @apply grid grid-cols-7 gap-1;
-
-        & .fi-fo-date-time-picker-calendar-header-day {
-            @apply text-center text-xs font-medium text-gray-500 dark:text-gray-400;
-        }
-    }
-
-    & .fi-fo-date-time-picker-calendar {
-        @apply grid grid-cols-[repeat(7,minmax(--spacing(7),1fr))] gap-1;
-
-        & .fi-fo-date-time-picker-calendar-day {
-            @apply rounded-full text-center text-sm leading-loose transition duration-75;
-
-            &.fi-disabled {
-                @apply pointer-events-none opacity-50;
-            }
-
-            &:not(.fi-disabled) {
-                @apply cursor-pointer;
-            }
-
-            &.fi-selected {
-                @apply text-primary-600 dark:text-primary-400 bg-gray-50 dark:bg-white/5;
-            }
-
-            &.fi-focused:not(.fi-selected):not(.fi-disabled) {
-                @apply bg-gray-50 dark:bg-white/5;
-            }
-
-            &.fi-fo-date-time-picker-calendar-day-today:not(.fi-focused):not(
-                    .fi-selected
-                ):not(.fi-disabled) {
-                @apply text-primary-600 dark:text-primary-400;
-            }
-
-            &:not(.fi-fo-date-time-picker-calendar-day-today):not(
-                    .fi-selected
-                ) {
-                @apply text-gray-950 dark:text-white;
-            }
-        }
-    }
-
-    & .fi-fo-date-time-picker-time-inputs {
-        @apply flex items-center justify-center rtl:flex-row-reverse;
-
-        & input {
-            @apply me-1 w-10 border-none bg-transparent p-0 text-center text-sm text-gray-950 focus:ring-0 dark:text-white;
-        }
-
-        & .fi-fo-date-time-picker-time-input-separator {
-            @apply text-sm font-medium text-gray-500 dark:text-gray-400;
-        }
-    }
-}

packages/support/resources/css/components/forms/components/file-upload.css

@@ -1,160 +0,0 @@
-@import 'cropperjs/dist/cropper.min.css';
-@import 'filepond/dist/filepond.min.css';
-@import 'filepond-plugin-image-edit/dist/filepond-plugin-image-edit.css';
-@import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
-@import 'filepond-plugin-media-preview/dist/filepond-plugin-media-preview.css';
-
-.fi-fo-file-upload {
-    @apply flex flex-col gap-y-2;
-
-    &.fi-align-start,
-    &.fi-align-left {
-        @apply items-start;
-    }
-
-    &.fi-align-center {
-        @apply items-center;
-    }
-
-    &.fi-align-end,
-    &.fi-align-right {
-        @apply items-end;
-    }
-
-    & .fi-fo-file-upload-input-ctn {
-        @apply h-full w-full;
-    }
-
-    &.fi-fo-file-upload-avatar {
-        & .fi-fo-file-upload-input-ctn {
-            @apply h-full w-32;
-        }
-    }
-
-    & .fi-fo-file-upload-error-message {
-        @apply text-danger-600 dark:text-danger-400 text-sm;
-    }
-
-    & .filepond--root {
-        @apply mb-0 rounded-lg bg-white font-sans ring-1 shadow-sm ring-gray-950/10 dark:bg-white/5 dark:ring-white/20;
-    }
-
-    & .filepond--root[data-disabled='disabled'] {
-        @apply bg-gray-50 dark:bg-transparent dark:ring-white/10;
-    }
-
-    & .filepond--panel-root {
-        @apply bg-transparent;
-    }
-
-    & .filepond--drop-label label {
-        @apply p-3! text-sm text-gray-600 dark:text-gray-400;
-    }
-
-    & .filepond--label-action {
-        @apply text-primary-600 hover:text-primary-500 dark:hover:text-primary-500 font-medium no-underline transition duration-75 dark:text-white;
-    }
-
-    & .filepond--drip-blob {
-        @apply bg-gray-400 dark:bg-gray-500;
-    }
-
-    & .filepond--root[data-style-panel-layout='grid'] .filepond--item {
-        @apply inline;
-        width: calc(50% - 0.5rem);
-    }
-
-    @media screen(lg) {
-        & .filepond--root[data-style-panel-layout='grid'] .filepond--item {
-            width: calc(33.33% - 0.5rem);
-        }
-    }
-
-    & .filepond--download-icon {
-        @apply pointer-events-auto me-1 inline-block h-4 w-4 bg-white align-bottom hover:bg-white/70;
-        -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItZG93bmxvYWQiPjxwYXRoIGQ9Ik0yMSAxNXY0YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0ydi00Ij48L3BhdGg+PHBvbHlsaW5lIHBvaW50cz0iNyAxMCAxMiAxNSAxNyAxMCI+PC9wb2x5bGluZT48bGluZSB4MT0iMTIiIHkxPSIxNSIgeDI9IjEyIiB5Mj0iMyI+PC9saW5lPjwvc3ZnPg==');
-        mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItZG93bmxvYWQiPjxwYXRoIGQ9Ik0yMSAxNXY0YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0ydi00Ij48L3BhdGg+PHBvbHlsaW5lIHBvaW50cz0iNyAxMCAxMiAxNSAxNyAxMCI+PC9wb2x5bGluZT48bGluZSB4MT0iMTIiIHkxPSIxNSIgeDI9IjEyIiB5Mj0iMyI+PC9saW5lPjwvc3ZnPg==');
-        -webkit-mask-repeat: no-repeat;
-        mask-repeat: no-repeat;
-        -webkit-mask-size: 100%;
-        mask-size: 100%;
-    }
-
-    & .filepond--open-icon {
-        @apply pointer-events-auto me-1 inline-block h-4 w-4 bg-white align-bottom hover:bg-white/70;
-        -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJoLTYgdy02IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTEwIDZINmEyIDIgMCAwMC0yIDJ2MTBhMiAyIDAgMDAyIDJoMTBhMiAyIDAgMDAyLTJ2LTRNMTQgNGg2bTAgMHY2bTAtNkwxMCAxNCIgLz4KPC9zdmc+Cg==);
-        mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJoLTYgdy02IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTEwIDZINmEyIDIgMCAwMC0yIDJ2MTBhMiAyIDAgMDAyIDJoMTBhMiAyIDAgMDAyLTJ2LTRNMTQgNGg2bTAgMHY2bTAtNkwxMCAxNCIgLz4KPC9zdmc+Cg==);
-        -webkit-mask-repeat: no-repeat;
-        mask-repeat: no-repeat;
-        -webkit-mask-size: 100%;
-        mask-size: 100%;
-    }
-
-    & .filepond--file-action-button.filepond--action-edit-item {
-        @apply bg-black/50;
-    }
-
-    & .fi-fo-file-upload-editor {
-        @apply fixed inset-0 isolate z-50 h-[100dvh] w-screen p-2 sm:p-10 md:p-20;
-
-        & .fi-fo-file-upload-editor-overlay {
-            @apply fixed inset-0 h-full w-full cursor-pointer bg-gray-950/50 dark:bg-gray-950/75;
-            will-change: transform;
-        }
-
-        & .fi-fo-file-upload-editor-window {
-            @apply isolate mx-auto flex h-full w-full flex-col overflow-hidden rounded-xl bg-white ring-1 ring-gray-900/10 lg:flex-row dark:bg-gray-800 dark:ring-gray-50/10;
-        }
-
-        & .fi-fo-file-upload-editor-image-ctn {
-            @apply h-full w-full flex-1 overflow-auto p-4;
-        }
-
-        & .fi-fo-file-upload-editor-image {
-            @apply h-full w-auto;
-        }
-
-        & .fi-fo-file-upload-editor-control-panel {
-            @apply flex h-full w-full flex-1 flex-col overflow-y-auto bg-gray-50 lg:max-w-xs dark:bg-gray-900/30;
-
-            & .fi-fo-file-upload-editor-control-panel-main {
-                @apply flex-1 space-y-6 overflow-auto p-4;
-            }
-
-            & .fi-fo-file-upload-editor-control-panel-group {
-                @apply grid gap-3;
-
-                & .fi-btn-group {
-                    @apply w-full;
-                }
-
-                & .fi-btn.fi-active {
-                    @apply bg-gray-50 dark:bg-gray-700;
-                }
-
-                & .fi-fo-file-upload-editor-control-panel-group-title {
-                    @apply text-xs text-gray-950 dark:text-white;
-                }
-            }
-
-            & .fi-fo-file-upload-editor-control-panel-footer {
-                @apply flex items-center gap-3 px-4 py-3;
-            }
-
-            & .fi-fo-file-upload-editor-control-panel-reset-action {
-                @apply ml-auto;
-            }
-        }
-
-        & .cropper-drag-box.cropper-crop.cropper-modal {
-            @apply bg-gray-100/50 opacity-100 dark:bg-gray-900/80;
-        }
-
-        &.fi-fo-file-upload-editor-circle-cropper {
-            & .cropper-view-box,
-            & .cropper-face {
-                border-radius: 50%;
-            }
-        }
-    }
-}

packages/support/resources/css/components/forms/components/key-value.css

@@ -1,57 +0,0 @@
-.fi-fo-key-value {
-    & .fi-fo-key-value-table-ctn {
-        @apply divide-y divide-gray-200 dark:divide-white/10;
-    }
-
-    & .fi-fo-key-value-table {
-        @apply w-full table-auto divide-y divide-gray-200 dark:divide-white/5;
-
-        & > thead {
-            & > tr {
-                & > th {
-                    @apply px-3 py-2 text-start text-sm font-medium text-gray-700 dark:text-gray-200;
-
-                    &.fi-has-action {
-                        @apply w-9 p-0;
-                    }
-                }
-            }
-        }
-
-        & > tbody {
-            @apply divide-y divide-gray-200 dark:divide-white/5;
-
-            & > tr {
-                @apply divide-x divide-gray-200 rtl:divide-x-reverse dark:divide-white/5;
-
-                & > td {
-                    @apply w-1/2 p-0;
-
-                    &.fi-has-action {
-                        @apply w-auto p-0.5;
-
-                        & .fi-fo-key-value-table-row-sortable-handle {
-                            @apply flex;
-                        }
-                    }
-
-                    & .fi-input {
-                        @apply font-mono;
-                    }
-                }
-            }
-        }
-    }
-
-    & .fi-fo-key-value-add-action-ctn {
-        @apply flex justify-center px-3 py-2;
-    }
-}
-
-.fi-fo-key-value-wrp {
-    &.fi-fo-field-has-inline-label {
-        & .fi-fo-field-label-col {
-            @apply sm:pt-1.5;
-        }
-    }
-}

packages/support/resources/css/components/forms/components/markdown-editor.css

@@ -1,315 +0,0 @@
-@import 'easymde/dist/easymde.min.css';
-
-.fi-fo-markdown-editor {
-    --color-cm-red: #991b1b;
-    --color-cm-orange: #9a3412;
-    --color-cm-amber: #92400e;
-    --color-cm-yellow: #854d0e;
-    --color-cm-lime: #3f6212;
-    --color-cm-green: #166534;
-    --color-cm-emerald: #065f46;
-    --color-cm-teal: #115e59;
-    --color-cm-cyan: #155e75;
-    --color-cm-sky: #075985;
-    --color-cm-blue: #1e40af;
-    --color-cm-indigo: #3730a3;
-    --color-cm-violet: #5b21b6;
-    --color-cm-purple: #6b21a8;
-    --color-cm-fuchsia: #86198f;
-    --color-cm-pink: #9d174d;
-    --color-cm-rose: #9f1239;
-    --color-cm-gray: #18181b;
-    --color-cm-gray-muted: #71717a;
-    --color-cm-gray-background: #e4e4e7;
-
-    &:not(.fi-disabled) {
-        @apply max-w-full overflow-hidden font-mono text-base text-gray-950 sm:text-sm dark:text-white;
-    }
-
-    &.fi-disabled {
-        @apply prose dark:prose-invert block w-full max-w-none rounded-lg bg-gray-50 px-3 py-3 text-gray-500 ring-1 shadow-xs ring-gray-950/10 sm:text-sm dark:bg-transparent dark:text-gray-400 dark:ring-white/10;
-    }
-
-    & .cm-s-easymde .cm-comment {
-        background-color: transparent;
-        color: var(--color-cm-gray-muted);
-    }
-
-    & .EasyMDEContainer .CodeMirror-cursor {
-        border-color: currentColor;
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-keyword {
-        color: var(--color-cm-violet);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-atom {
-        color: var(--color-cm-blue);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-number {
-        color: var(--color-cm-green);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-def {
-        color: var(--color-cm-blue);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-variable {
-        color: var(--color-cm-yellow);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-variable-2 {
-        color: var(--color-cm-blue);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-variable-3 {
-        color: var(--color-cm-emerald);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-property {
-        color: var(--color-cm-gray);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-operator {
-        color: var(--color-cm-gray);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-string {
-        color: var(--color-cm-rose);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-string-2 {
-        color: var(--color-cm-rose);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-meta {
-        color: var(--color-cm-gray-muted);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-error {
-        color: var(--color-cm-red);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-qualifier {
-        color: var(--color-cm-gray-muted);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-builtin {
-        color: var(--color-cm-violet);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-bracket {
-        color: var(--color-cm-gray-muted);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-tag {
-        color: var(--color-cm-green);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-attribute {
-        color: var(--color-cm-blue);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-hr {
-        color: var(--color-cm-gray-muted);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-formatting-quote {
-        color: var(--color-cm-sky);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-formatting-quote + .cm-quote {
-        color: var(--color-cm-gray-muted);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-formatting-list,
-    & .EasyMDEContainer .cm-s-easymde .cm-formatting-list + .cm-variable-2,
-    & .EasyMDEContainer .cm-s-easymde .cm-tab + .cm-variable-2 {
-        color: var(--color-cm-gray);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-link {
-        color: var(--color-cm-blue);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-tag {
-        color: var(--color-cm-red);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-attribute {
-        color: var(--color-cm-amber);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-attribute + .cm-string {
-        color: var(--color-cm-green);
-    }
-
-    &
-        .EasyMDEContainer
-        .cm-s-easymde
-        .cm-formatting-code
-        + .cm-comment:not(.cm-formatting-code) {
-        background-color: var(--color-cm-gray-background);
-        color: var(--color-cm-gray);
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-header-1 {
-        @apply text-3xl;
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-header-2 {
-        @apply text-2xl;
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-header-3 {
-        @apply text-xl;
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-header-4 {
-        @apply text-lg;
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-header-5 {
-        @apply text-base;
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-header-6 {
-        @apply text-sm;
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-comment {
-        @apply bg-none;
-    }
-
-    & .EasyMDEContainer .cm-s-easymde .cm-formatting-code-block,
-    & .EasyMDEContainer .cm-s-easymde .cm-tab + .cm-comment {
-        @apply bg-transparent text-inherit;
-    }
-
-    & .EasyMDEContainer .CodeMirror {
-        @apply border-none bg-transparent px-3 py-1.5 text-inherit;
-    }
-
-    & .EasyMDEContainer .CodeMirror-scroll {
-        @apply h-auto;
-    }
-
-    & .EasyMDEContainer .editor-toolbar {
-        @apply flex gap-x-1 overflow-x-auto rounded-none border-0 border-b border-gray-200 px-2.5 py-2 dark:border-white/10;
-    }
-
-    & .EasyMDEContainer .editor-toolbar button {
-        @apply grid h-8 w-8 cursor-pointer place-content-center rounded-lg border-none p-0 transition duration-75 hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;
-    }
-
-    & .EasyMDEContainer .editor-toolbar button.active {
-        @apply bg-gray-50 dark:bg-white/5;
-    }
-
-    & .EasyMDEContainer .editor-toolbar button::before {
-        @apply block h-5 w-5 bg-gray-700;
-        content: '';
-        mask-position: center;
-        mask-repeat: no-repeat;
-    }
-
-    & .EasyMDEContainer .editor-toolbar button.active::before {
-        @apply bg-primary-600;
-    }
-
-    & .EasyMDEContainer .editor-toolbar .separator {
-        @apply m-0! w-1 border-none;
-    }
-
-    & .EasyMDEContainer .editor-toolbar .bold::before {
-        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M4 3a1 1 0 0 1 1-1h6a4.5 4.5 0 0 1 3.274 7.587A4.75 4.75 0 0 1 11.25 18H5a1 1 0 0 1-1-1V3Zm2.5 5.5v-4H11a2 2 0 1 1 0 4H6.5Zm0 2.5v4.5h4.75a2.25 2.25 0 0 0 0-4.5H6.5Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
-    }
-
-    & .EasyMDEContainer .editor-toolbar .italic::before {
-        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M8 2.75A.75.75 0 0 1 8.75 2h7.5a.75.75 0 0 1 0 1.5h-3.215l-4.483 13h2.698a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3.215l4.483-13H8.75A.75.75 0 0 1 8 2.75Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
-    }
-
-    & .EasyMDEContainer .editor-toolbar .strikethrough::before {
-        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M11.617 3.963c-1.186-.318-2.418-.323-3.416.015-.992.336-1.49.91-1.642 1.476-.152.566-.007 1.313.684 2.1.528.6 1.273 1.1 2.128 1.446h7.879a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5h3.813a5.976 5.976 0 0 1-.447-.456C5.18 7.479 4.798 6.231 5.11 5.066c.312-1.164 1.268-2.055 2.61-2.509 1.336-.451 2.877-.42 4.286-.043.856.23 1.684.592 2.409 1.074a.75.75 0 1 1-.83 1.25 6.723 6.723 0 0 0-1.968-.875Zm1.909 8.123a.75.75 0 0 1 1.015.309c.53.99.607 2.062.18 3.01-.421.94-1.289 1.648-2.441 2.038-1.336.452-2.877.42-4.286.043-1.409-.377-2.759-1.121-3.69-2.18a.75.75 0 1 1 1.127-.99c.696.791 1.765 1.403 2.952 1.721 1.186.318 2.418.323 3.416-.015.853-.288 1.34-.756 1.555-1.232.21-.467.205-1.049-.136-1.69a.75.75 0 0 1 .308-1.014Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
-    }
-
-    & .EasyMDEContainer .editor-toolbar .link::before {
-        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath d='M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z' /%3E%3Cpath d='M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z' /%3E%3C/svg%3E%0A");
-    }
-
-    & .EasyMDEContainer .editor-toolbar .heading::before {
-        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M2.75 4a.75.75 0 0 1 .75.75v4.5h5v-4.5a.75.75 0 0 1 1.5 0v10.5a.75.75 0 0 1-1.5 0v-4.5h-5v4.5a.75.75 0 0 1-1.5 0V4.75A.75.75 0 0 1 2.75 4ZM13 8.75a.75.75 0 0 1 .75-.75h1.75a.75.75 0 0 1 .75.75v5.75h1a.75.75 0 0 1 0 1.5h-3.5a.75.75 0 0 1 0-1.5h1v-5h-1a.75.75 0 0 1-.75-.75Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
-    }
-
-    & .EasyMDEContainer .editor-toolbar .quote::before {
-        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M10 2c-2.236 0-4.43.18-6.57.524C1.993 2.755 1 4.014 1 5.426v5.148c0 1.413.993 2.67 2.43 2.902 1.168.188 2.352.327 3.55.414.28.02.521.18.642.413l1.713 3.293a.75.75 0 0 0 1.33 0l1.713-3.293a.783.783 0 0 1 .642-.413 41.102 41.102 0 0 0 3.55-.414c1.437-.231 2.43-1.49 2.43-2.902V5.426c0-1.413-.993-2.67-2.43-2.902A41.289 41.289 0 0 0 10 2ZM6.75 6a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Zm0 2.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
-    }
-
-    & .EasyMDEContainer .editor-toolbar .code::before {
-        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M6.28 5.22a.75.75 0 0 1 0 1.06L2.56 10l3.72 3.72a.75.75 0 0 1-1.06 1.06L.97 10.53a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Zm7.44 0a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L17.44 10l-3.72-3.72a.75.75 0 0 1 0-1.06ZM11.377 2.011a.75.75 0 0 1 .612.867l-2.5 14.5a.75.75 0 0 1-1.478-.255l2.5-14.5a.75.75 0 0 1 .866-.612Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
-    }
-
-    & .EasyMDEContainer .editor-toolbar .unordered-list::before {
-        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M6 4.75A.75.75 0 0 1 6.75 4h10.5a.75.75 0 0 1 0 1.5H6.75A.75.75 0 0 1 6 4.75ZM6 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H6.75A.75.75 0 0 1 6 10Zm0 5.25a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H6.75a.75.75 0 0 1-.75-.75ZM1.99 4.75a1 1 0 0 1 1-1H3a1 1 0 0 1 1 1v.01a1 1 0 0 1-1 1h-.01a1 1 0 0 1-1-1v-.01ZM1.99 15.25a1 1 0 0 1 1-1H3a1 1 0 0 1 1 1v.01a1 1 0 0 1-1 1h-.01a1 1 0 0 1-1-1v-.01ZM1.99 10a1 1 0 0 1 1-1H3a1 1 0 0 1 1 1v.01a1 1 0 0 1-1 1h-.01a1 1 0 0 1-1-1V10Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
-    }
-
-    & .EasyMDEContainer .editor-toolbar .ordered-list::before {
-        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath d='M3 1.25a.75.75 0 0 0 0 1.5h.25v2.5a.75.75 0 0 0 1.5 0V2A.75.75 0 0 0 4 1.25H3ZM2.97 8.654a3.5 3.5 0 0 1 1.524-.12.034.034 0 0 1-.012.012L2.415 9.579A.75.75 0 0 0 2 10.25v1c0 .414.336.75.75.75h2.5a.75.75 0 0 0 0-1.5H3.927l1.225-.613c.52-.26.848-.79.848-1.371 0-.647-.429-1.327-1.193-1.451a5.03 5.03 0 0 0-2.277.155.75.75 0 0 0 .44 1.434ZM7.75 3a.75.75 0 0 0 0 1.5h9.5a.75.75 0 0 0 0-1.5h-9.5ZM7.75 9.25a.75.75 0 0 0 0 1.5h9.5a.75.75 0 0 0 0-1.5h-9.5ZM7.75 15.5a.75.75 0 0 0 0 1.5h9.5a.75.75 0 0 0 0-1.5h-9.5ZM2.625 13.875a.75.75 0 0 0 0 1.5h1.5a.125.125 0 0 1 0 .25H3.5a.75.75 0 0 0 0 1.5h.625a.125.125 0 0 1 0 .25h-1.5a.75.75 0 0 0 0 1.5h1.5a1.625 1.625 0 0 0 1.37-2.5 1.625 1.625 0 0 0-1.37-2.5h-1.5Z' /%3E%3C/svg%3E%0A");
-    }
-
-    & .EasyMDEContainer .editor-toolbar .table::before {
-        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M.99 5.24A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25l.01 9.5A2.25 2.25 0 0 1 16.76 17H3.26A2.267 2.267 0 0 1 1 14.74l-.01-9.5Zm8.26 9.52v-.625a.75.75 0 0 0-.75-.75H3.25a.75.75 0 0 0-.75.75v.615c0 .414.336.75.75.75h5.373a.75.75 0 0 0 .627-.74Zm1.5 0a.75.75 0 0 0 .627.74h5.373a.75.75 0 0 0 .75-.75v-.615a.75.75 0 0 0-.75-.75H11.5a.75.75 0 0 0-.75.75v.625Zm6.75-3.63v-.625a.75.75 0 0 0-.75-.75H11.5a.75.75 0 0 0-.75.75v.625c0 .414.336.75.75.75h5.25a.75.75 0 0 0 .75-.75Zm-8.25 0v-.625a.75.75 0 0 0-.75-.75H3.25a.75.75 0 0 0-.75.75v.625c0 .414.336.75.75.75H8.5a.75.75 0 0 0 .75-.75ZM17.5 7.5v-.625a.75.75 0 0 0-.75-.75H11.5a.75.75 0 0 0-.75.75V7.5c0 .414.336.75.75.75h5.25a.75.75 0 0 0 .75-.75Zm-8.25 0v-.625a.75.75 0 0 0-.75-.75H3.25a.75.75 0 0 0-.75.75V7.5c0 .414.336.75.75.75H8.5a.75.75 0 0 0 .75-.75Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
-    }
-
-    & .EasyMDEContainer .editor-toolbar .upload-image::before {
-        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M1 5.25A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25v9.5A2.25 2.25 0 0 1 16.75 17H3.25A2.25 2.25 0 0 1 1 14.75v-9.5Zm1.5 5.81v3.69c0 .414.336.75.75.75h13.5a.75.75 0 0 0 .75-.75v-2.69l-2.22-2.219a.75.75 0 0 0-1.06 0l-1.91 1.909.47.47a.75.75 0 1 1-1.06 1.06L6.53 8.091a.75.75 0 0 0-1.06 0l-2.97 2.97ZM12 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
-    }
-
-    & .EasyMDEContainer .editor-toolbar .undo::before {
-        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M7.793 2.232a.75.75 0 0 1-.025 1.06L3.622 7.25h10.003a5.375 5.375 0 0 1 0 10.75H10.75a.75.75 0 0 1 0-1.5h2.875a3.875 3.875 0 0 0 0-7.75H3.622l4.146 3.957a.75.75 0 0 1-1.036 1.085l-5.5-5.25a.75.75 0 0 1 0-1.085l5.5-5.25a.75.75 0 0 1 1.06.025Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
-    }
-
-    & .EasyMDEContainer .editor-toolbar .redo::before {
-        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M12.207 2.232a.75.75 0 0 0 .025 1.06l4.146 3.958H6.375a5.375 5.375 0 0 0 0 10.75H9.25a.75.75 0 0 0 0-1.5H6.375a3.875 3.875 0 0 1 0-7.75h10.003l-4.146 3.957a.75.75 0 0 0 1.036 1.085l5.5-5.25a.75.75 0 0 0 0-1.085l-5.5-5.25a.75.75 0 0 0-1.06.025Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
-    }
-
-    & .EasyMDEContainer .editor-statusbar {
-        @apply hidden;
-    }
-}
-
-.dark .fi-fo-markdown-editor {
-    --color-cm-red: #f87171;
-    --color-cm-orange: #fb923c;
-    --color-cm-amber: #fbbf24;
-    --color-cm-yellow: #facc15;
-    --color-cm-lime: #a3e635;
-    --color-cm-green: #4ade80;
-    --color-cm-emerald: #4ade80;
-    --color-cm-teal: #2dd4bf;
-    --color-cm-cyan: #22d3ee;
-    --color-cm-sky: #38bdf8;
-    --color-cm-blue: #60a5fa;
-    --color-cm-indigo: #818cf8;
-    --color-cm-violet: #a78bfa;
-    --color-cm-purple: #c084fc;
-    --color-cm-fuchsia: #e879f9;
-    --color-cm-pink: #f472b6;
-    --color-cm-rose: #fb7185;
-    --color-cm-gray: #fafafa;
-    --color-cm-gray-muted: #a1a1aa;
-    --color-cm-gray-background: #52525b;
-
-    & .EasyMDEContainer .cm-s-easymde span.CodeMirror-selectedtext {
-        filter: invert(100%);
-    }
-
-    & .EasyMDEContainer .editor-toolbar button::before {
-        @apply bg-gray-300;
-    }
-
-    & .EasyMDEContainer .editor-toolbar button.active::before {
-        @apply bg-primary-400;
-    }
-}

packages/support/resources/css/components/forms/components/radio.css

@@ -1,31 +0,0 @@
-.fi-fo-radio {
-    @apply gap-4;
-
-    &.fi-inline {
-        @apply flex flex-wrap;
-    }
-
-    &:not(.fi-inline).fi-grid-direction-col {
-        @apply -mt-4;
-
-        & > .fi-fo-radio-label {
-            @apply break-inside-avoid pt-4;
-        }
-    }
-
-    & > .fi-fo-radio-label {
-        @apply flex gap-x-3 self-start;
-
-        & > .fi-radio-input {
-            @apply mt-1;
-        }
-
-        & > .fi-fo-radio-label-text {
-            @apply grid text-sm leading-6 font-medium text-gray-950 dark:text-white;
-        }
-
-        & .fi-fo-radio-label-description {
-            @apply font-normal text-gray-500 dark:text-gray-400;
-        }
-    }
-}

packages/support/resources/css/components/forms/components/repeater.css

@@ -1,155 +0,0 @@
-.fi-fo-repeater {
-    @apply grid gap-y-4;
-
-    & .fi-fo-repeater-actions {
-        @apply flex gap-x-3;
-
-        &.fi-hidden {
-            @apply hidden;
-        }
-    }
-
-    & .fi-fo-repeater-items {
-        @apply items-start gap-4;
-    }
-
-    & .fi-fo-repeater-item {
-        @apply divide-y divide-gray-100 rounded-xl bg-white ring-1 shadow-xs ring-gray-950/5 dark:divide-white/10 dark:bg-white/5 dark:ring-white/10;
-
-        &.fi-collapsed {
-            @apply overflow-hidden;
-
-            & .fi-fo-repeater-item-header-collapsible-actions {
-                @apply -rotate-180;
-            }
-
-            & .fi-fo-repeater-item-header-collapse-action {
-                @apply pointer-events-none opacity-0;
-            }
-        }
-
-        &:not(.fi-collapsed) {
-            & .fi-fo-repeater-item-header-expand-action {
-                @apply pointer-events-none opacity-0;
-            }
-        }
-    }
-
-    & .fi-fo-repeater-item-header {
-        @apply flex items-center gap-x-3 overflow-hidden px-4 py-3;
-    }
-
-    &.fi-collapsible {
-        & .fi-fo-repeater-item-header {
-            @apply cursor-pointer select-none;
-        }
-    }
-
-    & .fi-fo-repeater-item-header-start-actions {
-        @apply flex items-center gap-x-3;
-    }
-
-    & .fi-fo-repeater-item-header-icon {
-        @apply text-gray-400 dark:text-gray-500;
-    }
-
-    & .fi-fo-repeater-item-header-label {
-        @apply text-sm font-medium text-gray-950 dark:text-white;
-
-        &.fi-truncated {
-            @apply truncate;
-        }
-    }
-
-    & .fi-fo-repeater-item-header-end-actions {
-        @apply ms-auto flex items-center gap-x-3;
-    }
-
-    & .fi-fo-repeater-item-header-collapsible-actions {
-        @apply relative transition;
-    }
-
-    & .fi-fo-repeater-item-header-collapse-action {
-        @apply transition;
-    }
-
-    & .fi-fo-repeater-item-header-expand-action {
-        @apply absolute inset-0 rotate-180 transition;
-    }
-
-    & .fi-fo-repeater-item-content {
-        @apply p-4;
-    }
-
-    & .fi-fo-repeater-add-between-items-ctn {
-        @apply flex w-full justify-center;
-    }
-
-    & .fi-fo-repeater-add-between-items {
-        @apply rounded-lg bg-white dark:bg-gray-900;
-    }
-
-    & .fi-fo-repeater-label-between-items-ctn {
-        @apply relative border-t border-gray-200 dark:border-white/10;
-    }
-
-    & .fi-fo-repeater-label-between-items {
-        @apply absolute -top-3 left-3 px-1 text-sm font-medium;
-    }
-
-    & .fi-fo-repeater-add {
-        @apply flex w-full;
-
-        &.fi-align-start,
-        &.fi-align-left {
-            @apply justify-start;
-        }
-
-        &.fi-align-center {
-            @apply justify-center;
-        }
-
-        &.fi-align-end,
-        &.fi-align-right {
-            @apply justify-end;
-        }
-    }
-}
-
-.fi-fo-simple-repeater {
-    @apply grid gap-y-4;
-
-    & .fi-fo-repeater-items {
-        @apply gap-4;
-    }
-
-    & .fi-fo-repeater-item {
-        @apply flex justify-start gap-x-3;
-    }
-
-    & .fi-fo-repeater-item-content {
-        @apply flex-1;
-    }
-
-    & .fi-fo-repeater-item-actions {
-        @apply flex items-center gap-x-1;
-    }
-
-    & .fi-fo-repeater-add {
-        @apply flex w-full;
-
-        &.fi-align-start,
-        &.fi-align-left {
-            @apply justify-start;
-        }
-
-        &.fi-align-center {
-            @apply justify-center;
-        }
-
-        &.fi-align-end,
-        &.fi-align-right {
-            @apply justify-end;
-        }
-    }
-}

packages/support/resources/css/components/forms/components/rich-editor.css

@@ -1,33 +0,0 @@
-.fi-fo-rich-editor {
-    &.fi-fo-rich-editor-uploading-file {
-        @apply pointer-events-none cursor-wait opacity-50;
-    }
-
-    & .fi-fo-rich-editor-toolbar {
-        @apply relative flex gap-x-3 overflow-x-auto border-b border-gray-200 px-2.5 py-2 dark:border-white/10;
-
-        & .fi-fo-rich-editor-toolbar-group {
-            @apply flex gap-x-1;
-        }
-
-        & .fi-fo-rich-editor-toolbar-btn {
-            @apply flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-lg text-sm font-semibold text-gray-700 transition duration-75 hover:bg-gray-50 focus-visible:bg-gray-50 dark:text-gray-200 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;
-
-            &.fi-active {
-                @apply text-primary-600 dark:text-primary-400 bg-gray-50 dark:bg-white/5;
-            }
-        }
-    }
-
-    & .fi-fo-rich-editor-content {
-        @apply prose dark:prose-invert min-h-full w-full max-w-none px-5;
-    }
-
-    & .tiptap:focus {
-        @apply outline-none;
-    }
-
-    & img.fi-loading {
-        @apply animate-pulse;
-    }
-}

packages/support/resources/css/components/forms/components/select.css

@@ -1,202 +0,0 @@
-.fi-fo-select {
-    & .fi-hidden {
-        @apply hidden;
-    }
-
-    &.fi-fo-select-has-inline-prefix {
-        & .choices__inner {
-            @apply ps-0;
-        }
-    }
-
-    &.fi-fo-select-native {
-        & select:not(.choices) {
-            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
-        }
-    }
-
-    &:not(.fi-fo-select-native) {
-        & select {
-            @apply h-9 w-full rounded-lg border-none bg-transparent bg-none!;
-        }
-    }
-
-    & .choices {
-        @apply relative outline-none;
-    }
-
-    & .choices [hidden] {
-        @apply hidden!;
-    }
-
-    & .choices[data-type*='select-one'] .has-no-choices {
-        @apply hidden;
-    }
-
-    & .choices[data-type*='select-one'] .choices__input {
-        @apply m-0 block w-full;
-    }
-
-    & .choices__inner {
-        @apply bg-no-repeat py-1.5 ps-3 pe-8 outline-none sm:text-sm sm:leading-6;
-        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
-        background-position: right 0.5rem center;
-        background-size: 1.5em 1.5em;
-    }
-
-    & .choices.is-disabled .choices__inner {
-        @apply cursor-default;
-    }
-
-    & .choices__list--single {
-        @apply inline-block;
-    }
-
-    & .choices__list--single .choices__item {
-        @apply text-gray-950 dark:text-white;
-    }
-
-    & .choices.is-disabled .choices__list--single .choices__item {
-        @apply text-gray-500 dark:text-gray-400;
-    }
-
-    & .choices__list--multiple {
-        @apply flex flex-wrap gap-1.5;
-    }
-
-    & .choices__list--multiple:not(:empty) {
-        @apply -mx-1 mb-1 py-0.5;
-    }
-
-    & .choices__list--multiple .choices__item {
-        @apply bg-primary-50 text-primary-600 ring-primary-600/10 dark:bg-primary-400/10 dark:text-primary-400 dark:ring-primary-400/30 inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium break-all ring-1 ring-inset;
-    }
-
-    & .choices__list--dropdown,
-    & .choices__list[aria-expanded] {
-        @apply absolute top-full z-10 mt-2 hidden w-full overflow-hidden rounded-lg bg-white text-sm break-words ring-1 shadow-lg ring-gray-950/5 will-change-[visibility] dark:bg-gray-900 dark:ring-white/10;
-    }
-
-    & .is-active.choices__list--dropdown,
-    & .is-active.choices__list[aria-expanded] {
-        @apply block p-1;
-    }
-
-    & .choices__list--dropdown .choices__list,
-    & .choices__list[aria-expanded] .choices__list {
-        @apply max-h-60 overflow-auto will-change-scroll;
-    }
-
-    & .choices__item--choice {
-        @apply p-2 text-gray-500 transition-colors duration-75 dark:text-gray-400;
-    }
-
-    & .choices__item--choice.choices__item--selectable {
-        @apply rounded-md text-gray-950 dark:text-white;
-    }
-
-    & .choices__list--dropdown .choices__item--selectable.is-highlighted,
-    & .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
-        @apply bg-gray-50 dark:bg-white/5;
-    }
-
-    & .choices__item {
-        @apply cursor-default;
-    }
-
-    & .choices__item--disabled {
-        @apply pointer-events-none disabled:text-gray-500 dark:disabled:text-gray-400;
-    }
-
-    & .choices__placeholder.choices__item,
-    & .choices.is-disabled .choices__placeholder.choices__item {
-        @apply cursor-default text-gray-400 dark:text-gray-500;
-    }
-
-    & .choices__button {
-        @apply border-0 bg-transparent bg-center bg-no-repeat indent-[-9999px] outline-none;
-    }
-
-    & .choices[data-type*='select-one'] .choices__button {
-        @apply absolute end-0 me-9 h-4 w-4 p-0 opacity-50 transition-opacity duration-75 dark:opacity-40;
-        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==');
-        background-size: 0.7142em 0.7142em;
-        top: calc(50% - 0.5714em);
-    }
-
-    & .choices[data-type*='select-multiple'] .choices__button {
-        @apply h-4 w-4 opacity-50 dark:opacity-40;
-        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==');
-        background-size: 0.7142em 0.7142em;
-    }
-
-    & .choices[data-type*='select-one'] .choices__button:hover,
-    & .choices[data-type*='select-one'] .choices__button:focus-visible,
-    & .choices[data-type*='select-multiple'] .choices__button:hover,
-    & .choices[data-type*='select-multiple'] .choices__button:focus-visible {
-        @apply opacity-70 dark:opacity-60;
-    }
-
-    &
-        .choices[data-type*='select-one']
-        &
-        .choices__item[data-value='']
-        &
-        .choices__button {
-        @apply hidden;
-    }
-
-    & .choices.is-disabled .choices__button {
-        @apply hidden;
-    }
-
-    /* !important is used to override default Tailwind input styling */
-
-    & .choices__input {
-        @apply border-none bg-transparent! p-0! text-base! text-gray-950 transition duration-75 placeholder:text-gray-400 focus-visible:!ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:var(--color-gray-500)] sm:!text-sm sm:leading-6 dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:var(--color-gray-400)];
-
-        &:focus-visible {
-            @apply outline-none;
-        }
-    }
-
-    & .choices__list--dropdown .choices__input {
-        @apply px-2! py-2!;
-    }
-
-    & .choices__input::-webkit-search-decoration,
-    & .choices__input::-webkit-search-cancel-button,
-    & .choices__input::-webkit-search-results-button,
-    & .choices__input::-webkit-search-results-decoration {
-        @apply hidden;
-    }
-
-    & .choices__input::-ms-clear,
-    & .choices__input::-ms-reveal {
-        @apply hidden h-0 w-0;
-    }
-
-    & .choices__group {
-        @apply px-2 pt-4 pb-2 text-gray-500 first:pt-2 dark:text-gray-400;
-    }
-}
-
-.dark .fi-fo-select {
-    & .choices[data-type*='select-one'] .choices__button {
-        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==');
-    }
-
-    & .choices[data-type*='select-multiple'] .choices__button {
-        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==');
-    }
-}
-
-[dir='rtl'] .fi-fo-select {
-    & .choices__inner {
-        background-position: left 0.5rem center;
-    }
-
-    & select {
-        background-position: left 0.5rem center !important;
-    }
-}

packages/support/resources/css/components/forms/components/tags-input.css

@@ -1,33 +0,0 @@
-.fi-fo-tags-input {
-    &.fi-disabled {
-        & .fi-badge-delete-btn {
-            @apply hidden;
-        }
-    }
-
-    & .fi-fo-tags-input-tags-ctn {
-        @apply flex w-full flex-wrap gap-1.5 border-t border-t-gray-200 p-2 dark:border-t-white/10;
-
-        & > template {
-            @apply hidden;
-        }
-
-        & > .fi-badge {
-            &.fi-reorderable {
-                @apply cursor-move;
-            }
-
-            & .fi-badge-label-ctn {
-                @apply text-start select-none;
-            }
-        }
-    }
-}
-
-.fi-fo-tags-input-wrp {
-    &.fi-fo-field-has-inline-label {
-        & .fi-fo-field-label-col {
-            @apply sm:pt-1.5;
-        }
-    }
-}

packages/support/resources/css/components/forms/components/text-input.css

@@ -1,17 +0,0 @@
-.fi-fo-text-input {
-    @apply overflow-hidden;
-
-    & input {
-        &.fi-revealable {
-            @apply [&::-ms-reveal]:hidden;
-        }
-    }
-}
-
-.fi-fo-text-input-wrp {
-    &.fi-fo-field-has-inline-label {
-        & .fi-fo-field-label-col {
-            @apply sm:pt-1.5;
-        }
-    }
-}

packages/support/resources/css/components/forms/components/textarea.css

@@ -1,21 +0,0 @@
-.fi-fo-textarea {
-    @apply overflow-hidden;
-
-    & textarea {
-        @apply block h-full w-full border-none bg-transparent px-3 py-1.5 text-base text-gray-950 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:var(--color-gray-500)] disabled:placeholder:[-webkit-text-fill-color:var(--color-gray-400)] sm:text-sm sm:leading-6 dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:var(--color-gray-400)] dark:disabled:placeholder:[-webkit-text-fill-color:var(--color-gray-500)];
-    }
-
-    &.fi-autosizable {
-        & textarea {
-            @apply resize-none;
-        }
-    }
-}
-
-.fi-fo-textarea-wrp {
-    &.fi-fo-field-has-inline-label {
-        & .fi-fo-field-label-col {
-            @apply sm:pt-1.5;
-        }
-    }
-}

packages/support/resources/css/components/forms/components/toggle-buttons.css

@@ -1,33 +0,0 @@
-.fi-fo-toggle-buttons {
-    &.fi-btn-group {
-        @apply w-max;
-    }
-
-    &:not(.fi-btn-group) {
-        @apply gap-3;
-
-        &.fi-inline {
-            @apply flex flex-wrap;
-        }
-
-        &:not(.fi-inline).fi-grid-direction-col {
-            @apply -mt-3;
-
-            & .fi-fo-toggle-buttons-btn-ctn {
-                @apply break-inside-avoid pt-3;
-            }
-        }
-    }
-
-    & .fi-fo-toggle-buttons-input {
-        @apply pointer-events-none absolute opacity-0;
-    }
-}
-
-.fi-fo-toggle-buttons-wrp {
-    &.fi-fo-field-has-inline-label {
-        & .fi-fo-field-label-col {
-            @apply sm:pt-1.5;
-        }
-    }
-}

packages/support/resources/css/components/forms/field.css

@@ -1,59 +0,0 @@
-.fi-fo-field {
-    @apply grid gap-y-2;
-
-    &.fi-fo-field-has-inline-label {
-        @apply sm:grid-cols-3 sm:items-start sm:gap-x-4;
-
-        & .fi-fo-field-content-col {
-            @apply sm:col-span-2;
-        }
-    }
-
-    & .fi-fo-field-label-ctn {
-        @apply flex items-center gap-x-3;
-    }
-
-    & .fi-fo-field-label {
-        @apply inline-flex items-center gap-x-3 text-sm leading-6 font-medium text-gray-950 dark:text-white;
-
-        & .fi-fo-field-label-required-mark {
-            @apply text-danger-600 dark:text-danger-400 font-medium;
-        }
-
-        &.fi-hidden {
-            @apply sr-only;
-        }
-    }
-
-    & .fi-fo-field-label-col {
-        @apply grid auto-cols-fr gap-y-2;
-
-        &.fi-vertical-align-start {
-            @apply sm:items-start;
-        }
-
-        &.fi-vertical-align-center {
-            @apply sm:items-center;
-        }
-
-        &.fi-vertical-align-end {
-            @apply sm:items-end;
-        }
-    }
-
-    & .fi-fo-field-content-col {
-        @apply grid auto-cols-fr gap-y-2;
-    }
-
-    & .fi-fo-field-content-ctn {
-        @apply flex w-full items-center gap-x-3;
-    }
-
-    & .fi-fo-field-content {
-        @apply w-full;
-    }
-
-    & .fi-fo-field-wrp-error-message {
-        @apply text-danger-600 dark:text-danger-400 text-sm;
-    }
-}

packages/support/resources/css/components/grid.css

@@ -1,411 +1,413 @@
-.fi-grid {
-    &:not(.fi-grid-direction-col) {
-        @apply grid grid-cols-(--cols-default);
+@layer components {
+    .fi-grid {
+        &:not(.fi-grid-direction-col) {
+            @apply grid grid-cols-(--cols-default);
 
-        &.sm\:fi-grid-cols {
-            @apply sm:grid-cols-(--cols-sm);
+            &.sm\:fi-grid-cols {
+                @apply sm:grid-cols-(--cols-sm);
+            }
+
+            &.md\:fi-grid-cols {
+                @apply md:grid-cols-(--cols-md);
+            }
+
+            &.lg\:fi-grid-cols {
+                @apply lg:grid-cols-(--cols-lg);
+            }
+
+            &.xl\:fi-grid-cols {
+                @apply xl:grid-cols-(--cols-xl);
+            }
+
+            &.\32xl\:fi-grid-cols {
+                @apply 2xl:grid-cols-(--cols-2xl);
+            }
+
+            @supports (container-type: inline-size) {
+                &.\@3xs\:fi-grid-cols {
+                    @apply @3xs:grid-cols-(--cols-c3xs);
+                }
+
+                &.\@2xs\:fi-grid-cols {
+                    @apply @2xs:grid-cols-(--cols-c2xs);
+                }
+
+                &.\@xs\:fi-grid-cols {
+                    @apply @xs:grid-cols-(--cols-cxs);
+                }
+
+                &.\@sm\:fi-grid-cols {
+                    @apply @sm:grid-cols-(--cols-csm);
+                }
+
+                &.\@md\:fi-grid-cols {
+                    @apply @md:grid-cols-(--cols-cmd);
+                }
+
+                &.\@lg\:fi-grid-cols {
+                    @apply @lg:grid-cols-(--cols-clg);
+                }
+
+                &.\@xl\:fi-grid-cols {
+                    @apply @xl:grid-cols-(--cols-cxl);
+                }
+
+                &.\@2xl\:fi-grid-cols {
+                    @apply @2xl:grid-cols-(--cols-c2xl);
+                }
+
+                &.\@3xl\:fi-grid-cols {
+                    @apply @3xl:grid-cols-(--cols-c3xl);
+                }
+
+                &.\@4xl\:fi-grid-cols {
+                    @apply @4xl:grid-cols-(--cols-c4xl);
+                }
+
+                &.\@5xl\:fi-grid-cols {
+                    @apply @5xl:grid-cols-(--cols-c5xl);
+                }
+
+                &.\@6xl\:fi-grid-cols {
+                    @apply @6xl:grid-cols-(--cols-c6xl);
+                }
+
+                &.\@7xl\:fi-grid-cols {
+                    @apply @7xl:grid-cols-(--cols-c7xl);
+                }
+            }
+
+            @supports not (container-type: inline-size) {
+                &.\!\@sm\:fi-grid-cols {
+                    @apply sm:grid-cols-(--cols-ncsm);
+                }
+
+                &.\!\@md\:fi-grid-cols {
+                    @apply md:grid-cols-(--cols-ncmd);
+                }
+
+                &.\!\@lg\:fi-grid-cols {
+                    @apply lg:grid-cols-(--cols-nclg);
+                }
+
+                &.\!\@xl\:fi-grid-cols {
+                    @apply xl:grid-cols-(--cols-ncxl);
+                }
+
+                &.\!\@2xl\:fi-grid-cols {
+                    @apply 2xl:grid-cols-(--cols-nc2xl);
+                }
+            }
         }
 
-        &.md\:fi-grid-cols {
-            @apply md:grid-cols-(--cols-md);
+        &.fi-grid-direction-col {
+            @apply columns-(--cols-default);
+
+            &.sm\:fi-grid-cols {
+                @apply sm:columns-(--cols-sm);
+            }
+
+            &.md\:fi-grid-cols {
+                @apply md:columns-(--cols-md);
+            }
+
+            &.lg\:fi-grid-cols {
+                @apply lg:columns-(--cols-lg);
+            }
+
+            &.xl\:fi-grid-cols {
+                @apply xl:columns-(--cols-xl);
+            }
+
+            &.\32xl\:fi-grid-cols {
+                @apply 2xl:columns-(--cols-2xl);
+            }
+
+            @supports (container-type: inline-size) {
+                &.\@3xs\:fi-grid-cols {
+                    @apply @3xs:columns-(--cols-c3xs);
+                }
+
+                &.\@2xs\:fi-grid-cols {
+                    @apply @2xs:columns-(--cols-c2xs);
+                }
+
+                &.\@xs\:fi-grid-cols {
+                    @apply @xs:columns-(--cols-cxs);
+                }
+
+                &.\@sm\:fi-grid-cols {
+                    @apply @sm:columns-(--cols-csm);
+                }
+
+                &.\@md\:fi-grid-cols {
+                    @apply @md:columns-(--cols-cmd);
+                }
+
+                &.\@lg\:fi-grid-cols {
+                    @apply @lg:columns-(--cols-clg);
+                }
+
+                &.\@xl\:fi-grid-cols {
+                    @apply @xl:columns-(--cols-cxl);
+                }
+
+                &.\@2xl\:fi-grid-cols {
+                    @apply @2xl:columns-(--cols-c2xl);
+                }
+
+                &.\@3xl\:fi-grid-cols {
+                    @apply @3xl:columns-(--cols-c3xl);
+                }
+
+                &.\@4xl\:fi-grid-cols {
+                    @apply @4xl:columns-(--cols-c4xl);
+                }
+
+                &.\@5xl\:fi-grid-cols {
+                    @apply @5xl:columns-(--cols-c5xl);
+                }
+
+                &.\@6xl\:fi-grid-cols {
+                    @apply @6xl:columns-(--cols-c6xl);
+                }
+
+                &.\@7xl\:fi-grid-cols {
+                    @apply @7xl:columns-(--cols-c7xl);
+                }
+            }
+
+            @supports not (container-type: inline-size) {
+                &.\!\@sm\:fi-grid-cols {
+                    @apply sm:columns-(--cols-ncsm);
+                }
+
+                &.\!\@md\:fi-grid-cols {
+                    @apply md:columns-(--cols-ncmd);
+                }
+
+                &.\!\@lg\:fi-grid-cols {
+                    @apply lg:columns-(--cols-nclg);
+                }
+
+                &.\!\@xl\:fi-grid-cols {
+                    @apply xl:columns-(--cols-ncxl);
+                }
+
+                &.\!\@2xl\:fi-grid-cols {
+                    @apply 2xl:columns-(--cols-nc2xl);
+                }
+            }
+        }
+    }
+
+    @supports (container-type: inline-size) {
+        .fi-grid-ctn {
+            @apply @container;
+        }
+    }
+
+    .fi-grid-col {
+        @apply col-(--col-span-default);
+
+        &.sm\:fi-grid-col-span {
+            @apply sm:col-(--col-span-sm);
         }
 
-        &.lg\:fi-grid-cols {
-            @apply lg:grid-cols-(--cols-lg);
+        &.md\:fi-grid-col-span {
+            @apply md:col-(--col-span-md);
         }
 
-        &.xl\:fi-grid-cols {
-            @apply xl:grid-cols-(--cols-xl);
+        &.lg\:fi-grid-col-span {
+            @apply lg:col-(--col-span-lg);
         }
 
-        &.\32xl\:fi-grid-cols {
-            @apply 2xl:grid-cols-(--cols-2xl);
+        &.xl\:fi-grid-col-span {
+            @apply xl:col-(--col-span-xl);
+        }
+
+        &.\32xl\:fi-grid-col-span {
+            @apply 2xl:col-(--col-span-2xl);
         }
 
         @supports (container-type: inline-size) {
-            &.\@3xs\:fi-grid-cols {
-                @apply @3xs:grid-cols-(--cols-c3xs);
+            &.\@3xs\:fi-grid-col-span {
+                @apply @3xs:col-(--col-span-c3xs);
             }
 
-            &.\@2xs\:fi-grid-cols {
-                @apply @2xs:grid-cols-(--cols-c2xs);
+            &.\@2xs\:fi-grid-col-span {
+                @apply @2xs:col-(--col-span-c2xs);
             }
 
-            &.\@xs\:fi-grid-cols {
-                @apply @xs:grid-cols-(--cols-cxs);
+            &.\@xs\:fi-grid-col-span {
+                @apply @xs:col-(--col-span-cxs);
             }
 
-            &.\@sm\:fi-grid-cols {
-                @apply @sm:grid-cols-(--cols-csm);
+            &.\@sm\:fi-grid-col-span {
+                @apply @sm:col-(--col-span-csm);
             }
 
-            &.\@md\:fi-grid-cols {
-                @apply @md:grid-cols-(--cols-cmd);
+            &.\@md\:fi-grid-col-span {
+                @apply @md:col-(--col-span-cmd);
             }
 
-            &.\@lg\:fi-grid-cols {
-                @apply @lg:grid-cols-(--cols-clg);
+            &.\@lg\:fi-grid-col-span {
+                @apply @lg:col-(--col-span-clg);
             }
 
-            &.\@xl\:fi-grid-cols {
-                @apply @xl:grid-cols-(--cols-cxl);
+            &.\@xl\:fi-grid-col-span {
+                @apply @xl:col-(--col-span-cxl);
             }
 
-            &.\@2xl\:fi-grid-cols {
-                @apply @2xl:grid-cols-(--cols-c2xl);
+            &.\@2xl\:fi-grid-col-span {
+                @apply @2xl:col-(--col-span-c2xl);
             }
 
-            &.\@3xl\:fi-grid-cols {
-                @apply @3xl:grid-cols-(--cols-c3xl);
+            &.\@3xl\:fi-grid-col-span {
+                @apply @3xl:col-(--col-span-c3xl);
             }
 
-            &.\@4xl\:fi-grid-cols {
-                @apply @4xl:grid-cols-(--cols-c4xl);
+            &.\@4xl\:fi-grid-col-span {
+                @apply @4xl:col-(--col-span-c4xl);
             }
 
-            &.\@5xl\:fi-grid-cols {
-                @apply @5xl:grid-cols-(--cols-c5xl);
+            &.\@5xl\:fi-grid-col-span {
+                @apply @5xl:col-(--col-span-c5xl);
             }
 
-            &.\@6xl\:fi-grid-cols {
-                @apply @6xl:grid-cols-(--cols-c6xl);
+            &.\@6xl\:fi-grid-col-span {
+                @apply @6xl:col-(--col-span-c6xl);
             }
 
-            &.\@7xl\:fi-grid-cols {
-                @apply @7xl:grid-cols-(--cols-c7xl);
+            &.\@7xl\:fi-grid-col-span {
+                @apply @7xl:col-(--col-span-c7xl);
             }
         }
 
         @supports not (container-type: inline-size) {
-            &.\!\@sm\:fi-grid-cols {
-                @apply sm:grid-cols-(--cols-ncsm);
+            &.\!\@sm\:fi-grid-col-span {
+                @apply sm:col-(--col-span-ncsm);
             }
 
-            &.\!\@md\:fi-grid-cols {
-                @apply md:grid-cols-(--cols-ncmd);
+            &.\!\@md\:fi-grid-col-span {
+                @apply md:col-(--col-span-ncmd);
             }
 
-            &.\!\@lg\:fi-grid-cols {
-                @apply lg:grid-cols-(--cols-nclg);
+            &.\!\@lg\:fi-grid-col-span {
+                @apply lg:col-(--col-span-nclg);
             }
 
-            &.\!\@xl\:fi-grid-cols {
-                @apply xl:grid-cols-(--cols-ncxl);
+            &.\!\@xl\:fi-grid-col-span {
+                @apply xl:col-(--col-span-ncxl);
             }
 
-            &.\!\@2xl\:fi-grid-cols {
-                @apply 2xl:grid-cols-(--cols-nc2xl);
+            &.\!\@2xl\:fi-grid-col-span {
+                @apply 2xl:col-(--col-span-nc2xl);
             }
         }
-    }
 
-    &.fi-grid-direction-col {
-        @apply columns-(--cols-default);
-
-        &.sm\:fi-grid-cols {
-            @apply sm:columns-(--cols-sm);
+        &.fi-grid-col-start {
+            @apply col-start-(--col-start-default);
         }
 
-        &.md\:fi-grid-cols {
-            @apply md:columns-(--cols-md);
+        &.sm\:fi-grid-col-start {
+            @apply sm:col-start-(--col-start-sm);
         }
 
-        &.lg\:fi-grid-cols {
-            @apply lg:columns-(--cols-lg);
+        &.md\:fi-grid-col-start {
+            @apply md:col-start-(--col-start-md);
         }
 
-        &.xl\:fi-grid-cols {
-            @apply xl:columns-(--cols-xl);
+        &.lg\:fi-grid-col-start {
+            @apply lg:col-start-(--col-start-lg);
         }
 
-        &.\32xl\:fi-grid-cols {
-            @apply 2xl:columns-(--cols-2xl);
+        &.xl\:fi-grid-col-start {
+            @apply xl:col-start-(--col-start-xl);
+        }
+
+        &.\32xl\:fi-grid-col-start {
+            @apply 2xl:col-start-(--col-start-2xl);
         }
 
         @supports (container-type: inline-size) {
-            &.\@3xs\:fi-grid-cols {
-                @apply @3xs:columns-(--cols-c3xs);
+            &.\@3xs\:fi-grid-col-start {
+                @apply @3xs:col-start-(--col-start-c3xs);
             }
 
-            &.\@2xs\:fi-grid-cols {
-                @apply @2xs:columns-(--cols-c2xs);
+            &.\@2xs\:fi-grid-col-start {
+                @apply @2xs:col-start-(--col-start-c2xs);
             }
 
-            &.\@xs\:fi-grid-cols {
-                @apply @xs:columns-(--cols-cxs);
+            &.\@xs\:fi-grid-col-start {
+                @apply @xs:col-start-(--col-start-cxs);
             }
 
-            &.\@sm\:fi-grid-cols {
-                @apply @sm:columns-(--cols-csm);
+            &.\@sm\:fi-grid-col-start {
+                @apply @sm:col-start-(--col-start-csm);
             }
 
-            &.\@md\:fi-grid-cols {
-                @apply @md:columns-(--cols-cmd);
+            &.\@md\:fi-grid-col-start {
+                @apply @md:col-start-(--col-start-cmd);
             }
 
-            &.\@lg\:fi-grid-cols {
-                @apply @lg:columns-(--cols-clg);
+            &.\@lg\:fi-grid-col-start {
+                @apply @lg:col-start-(--col-start-clg);
             }
 
-            &.\@xl\:fi-grid-cols {
-                @apply @xl:columns-(--cols-cxl);
+            &.\@xl\:fi-grid-col-start {
+                @apply @xl:col-start-(--col-start-cxl);
             }
 
-            &.\@2xl\:fi-grid-cols {
-                @apply @2xl:columns-(--cols-c2xl);
+            &.\@2xl\:fi-grid-col-start {
+                @apply @2xl:col-start-(--col-start-c2xl);
             }
 
-            &.\@3xl\:fi-grid-cols {
-                @apply @3xl:columns-(--cols-c3xl);
+            &.\@3xl\:fi-grid-col-start {
+                @apply @3xl:col-start-(--col-start-c3xl);
             }
 
-            &.\@4xl\:fi-grid-cols {
-                @apply @4xl:columns-(--cols-c4xl);
+            &.\@4xl\:fi-grid-col-start {
+                @apply @4xl:col-start-(--col-start-c4xl);
             }
 
-            &.\@5xl\:fi-grid-cols {
-                @apply @5xl:columns-(--cols-c5xl);
+            &.\@5xl\:fi-grid-col-start {
+                @apply @5xl:col-start-(--col-start-c5xl);
             }
 
-            &.\@6xl\:fi-grid-cols {
-                @apply @6xl:columns-(--cols-c6xl);
+            &.\@6xl\:fi-grid-col-start {
+                @apply @6xl:col-start-(--col-start-c6xl);
             }
 
-            &.\@7xl\:fi-grid-cols {
-                @apply @7xl:columns-(--cols-c7xl);
+            &.\@7xl\:fi-grid-col-start {
+                @apply @7xl:col-start-(--col-start-c7xl);
             }
         }
 
         @supports not (container-type: inline-size) {
-            &.\!\@sm\:fi-grid-cols {
-                @apply sm:columns-(--cols-ncsm);
+            &.\!\@sm\:fi-grid-col-start {
+                @apply sm:col-start-(--col-start-ncsm);
             }
 
-            &.\!\@md\:fi-grid-cols {
-                @apply md:columns-(--cols-ncmd);
+            &.\!\@md\:fi-grid-col-start {
+                @apply md:col-start-(--col-start-ncmd);
             }
 
-            &.\!\@lg\:fi-grid-cols {
-                @apply lg:columns-(--cols-nclg);
+            &.\!\@lg\:fi-grid-col-start {
+                @apply lg:col-start-(--col-start-nclg);
             }
 
-            &.\!\@xl\:fi-grid-cols {
-                @apply xl:columns-(--cols-ncxl);
+            &.\!\@xl\:fi-grid-col-start {
+                @apply xl:col-start-(--col-start-ncxl);
             }
 
-            &.\!\@2xl\:fi-grid-cols {
-                @apply 2xl:columns-(--cols-nc2xl);
+            &.\!\@2xl\:fi-grid-col-start {
+                @apply 2xl:col-start-(--col-start-nc2xl);
             }
         }
+
+        &.fi-hidden {
+            @apply hidden;
+        }
     }
 }
-
-@supports (container-type: inline-size) {
-    .fi-grid-ctn {
-        @apply @container;
-    }
-}
-
-.fi-grid-col {
-    @apply col-(--col-span-default);
-
-    &.sm\:fi-grid-col-span {
-        @apply sm:col-(--col-span-sm);
-    }
-
-    &.md\:fi-grid-col-span {
-        @apply md:col-(--col-span-md);
-    }
-
-    &.lg\:fi-grid-col-span {
-        @apply lg:col-(--col-span-lg);
-    }
-
-    &.xl\:fi-grid-col-span {
-        @apply xl:col-(--col-span-xl);
-    }
-
-    &.\32xl\:fi-grid-col-span {
-        @apply 2xl:col-(--col-span-2xl);
-    }
-
-    @supports (container-type: inline-size) {
-        &.\@3xs\:fi-grid-col-span {
-            @apply @3xs:col-(--col-span-c3xs);
-        }
-
-        &.\@2xs\:fi-grid-col-span {
-            @apply @2xs:col-(--col-span-c2xs);
-        }
-
-        &.\@xs\:fi-grid-col-span {
-            @apply @xs:col-(--col-span-cxs);
-        }
-
-        &.\@sm\:fi-grid-col-span {
-            @apply @sm:col-(--col-span-csm);
-        }
-
-        &.\@md\:fi-grid-col-span {
-            @apply @md:col-(--col-span-cmd);
-        }
-
-        &.\@lg\:fi-grid-col-span {
-            @apply @lg:col-(--col-span-clg);
-        }
-
-        &.\@xl\:fi-grid-col-span {
-            @apply @xl:col-(--col-span-cxl);
-        }
-
-        &.\@2xl\:fi-grid-col-span {
-            @apply @2xl:col-(--col-span-c2xl);
-        }
-
-        &.\@3xl\:fi-grid-col-span {
-            @apply @3xl:col-(--col-span-c3xl);
-        }
-
-        &.\@4xl\:fi-grid-col-span {
-            @apply @4xl:col-(--col-span-c4xl);
-        }
-
-        &.\@5xl\:fi-grid-col-span {
-            @apply @5xl:col-(--col-span-c5xl);
-        }
-
-        &.\@6xl\:fi-grid-col-span {
-            @apply @6xl:col-(--col-span-c6xl);
-        }
-
-        &.\@7xl\:fi-grid-col-span {
-            @apply @7xl:col-(--col-span-c7xl);
-        }
-    }
-
-    @supports not (container-type: inline-size) {
-        &.\!\@sm\:fi-grid-col-span {
-            @apply sm:col-(--col-span-ncsm);
-        }
-
-        &.\!\@md\:fi-grid-col-span {
-            @apply md:col-(--col-span-ncmd);
-        }
-
-        &.\!\@lg\:fi-grid-col-span {
-            @apply lg:col-(--col-span-nclg);
-        }
-
-        &.\!\@xl\:fi-grid-col-span {
-            @apply xl:col-(--col-span-ncxl);
-        }
-
-        &.\!\@2xl\:fi-grid-col-span {
-            @apply 2xl:col-(--col-span-nc2xl);
-        }
-    }
-
-    &.fi-grid-col-start {
-        @apply col-start-(--col-start-default);
-    }
-
-    &.sm\:fi-grid-col-start {
-        @apply sm:col-start-(--col-start-sm);
-    }
-
-    &.md\:fi-grid-col-start {
-        @apply md:col-start-(--col-start-md);
-    }
-
-    &.lg\:fi-grid-col-start {
-        @apply lg:col-start-(--col-start-lg);
-    }
-
-    &.xl\:fi-grid-col-start {
-        @apply xl:col-start-(--col-start-xl);
-    }
-
-    &.\32xl\:fi-grid-col-start {
-        @apply 2xl:col-start-(--col-start-2xl);
-    }
-
-    @supports (container-type: inline-size) {
-        &.\@3xs\:fi-grid-col-start {
-            @apply @3xs:col-start-(--col-start-c3xs);
-        }
-
-        &.\@2xs\:fi-grid-col-start {
-            @apply @2xs:col-start-(--col-start-c2xs);
-        }
-
-        &.\@xs\:fi-grid-col-start {
-            @apply @xs:col-start-(--col-start-cxs);
-        }
-
-        &.\@sm\:fi-grid-col-start {
-            @apply @sm:col-start-(--col-start-csm);
-        }
-
-        &.\@md\:fi-grid-col-start {
-            @apply @md:col-start-(--col-start-cmd);
-        }
-
-        &.\@lg\:fi-grid-col-start {
-            @apply @lg:col-start-(--col-start-clg);
-        }
-
-        &.\@xl\:fi-grid-col-start {
-            @apply @xl:col-start-(--col-start-cxl);
-        }
-
-        &.\@2xl\:fi-grid-col-start {
-            @apply @2xl:col-start-(--col-start-c2xl);
-        }
-
-        &.\@3xl\:fi-grid-col-start {
-            @apply @3xl:col-start-(--col-start-c3xl);
-        }
-
-        &.\@4xl\:fi-grid-col-start {
-            @apply @4xl:col-start-(--col-start-c4xl);
-        }
-
-        &.\@5xl\:fi-grid-col-start {
-            @apply @5xl:col-start-(--col-start-c5xl);
-        }
-
-        &.\@6xl\:fi-grid-col-start {
-            @apply @6xl:col-start-(--col-start-c6xl);
-        }
-
-        &.\@7xl\:fi-grid-col-start {
-            @apply @7xl:col-start-(--col-start-c7xl);
-        }
-    }
-
-    @supports not (container-type: inline-size) {
-        &.\!\@sm\:fi-grid-col-start {
-            @apply sm:col-start-(--col-start-ncsm);
-        }
-
-        &.\!\@md\:fi-grid-col-start {
-            @apply md:col-start-(--col-start-ncmd);
-        }
-
-        &.\!\@lg\:fi-grid-col-start {
-            @apply lg:col-start-(--col-start-nclg);
-        }
-
-        &.\!\@xl\:fi-grid-col-start {
-            @apply xl:col-start-(--col-start-ncxl);
-        }
-
-        &.\!\@2xl\:fi-grid-col-start {
-            @apply 2xl:col-start-(--col-start-nc2xl);
-        }
-    }
-
-    &.fi-hidden {
-        @apply hidden;
-    }
-}

packages/support/resources/css/components/icon-button.css

@@ -1,122 +1,124 @@
-.fi-icon-btn {
-    @apply relative -m-2 flex size-9 items-center justify-center rounded-lg text-gray-500 transition duration-75 outline-none dark:text-gray-500;
-
-    &:not(.fi-disabled):not([disabled]) {
-        @apply focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 hover:text-gray-600 focus-visible:ring-2 dark:hover:text-gray-400;
-    }
-
-    &.fi-disabled,
-    &[disabled] {
-        @apply cursor-default opacity-70;
-
-        &:not([x-tooltip]) {
-            @apply pointer-events-none;
-        }
-    }
-
-    &.fi-size-xs {
-        @apply size-7;
-
-        &:has(.fi-icon.fi-size-sm) {
-            @apply -m-1.5;
-        }
-
-        &:has(.fi-icon.fi-size-md) {
-            @apply -m-1;
-        }
-
-        &:has(.fi-icon.fi-size-lg) {
-            @apply -m-0.5;
-        }
-    }
-
-    &.fi-size-sm {
-        @apply size-8;
-
-        &:has(.fi-icon.fi-size-sm) {
-            @apply -m-2;
-        }
-
-        &:has(.fi-icon.fi-size-md) {
-            @apply -m-1.5;
-        }
-
-        &:has(.fi-icon.fi-size-lg) {
-            @apply -m-1;
-        }
-    }
-
-    &.fi-size-md {
-        &:has(.fi-icon.fi-size-sm) {
-            @apply -m-2.5;
-        }
-
-        &:has(.fi-icon.fi-size-lg) {
-            @apply -m-1.5;
-        }
-    }
-
-    &.fi-size-lg {
-        @apply size-10;
-
-        &:has(.fi-icon.fi-size-sm) {
-            @apply -m-3;
-        }
-
-        &:has(.fi-icon.fi-size-md) {
-            @apply -m-2.5;
-        }
-
-        &:has(.fi-icon.fi-size-lg) {
-            @apply -m-2;
-        }
-    }
-
-    &.fi-size-xl {
-        @apply size-11;
-
-        &:has(.fi-icon.fi-size-sm) {
-            @apply -m-3.5;
-        }
-
-        &:has(.fi-icon.fi-size-md) {
-            @apply -m-3;
-        }
-
-        &:has(.fi-icon.fi-size-lg) {
-            @apply -m-2.5;
-        }
-    }
-
-    &.fi-color {
-        @apply text-(--text) dark:text-(--dark-text);
+@layer components {
+    .fi-icon-btn {
+        @apply relative -m-2 flex size-9 items-center justify-center rounded-lg text-gray-500 transition duration-75 outline-none dark:text-gray-500;
 
         &:not(.fi-disabled):not([disabled]) {
-            @apply focus-visible:ring-color-600 dark:focus-visible:ring-color-500 hover:text-(--hover-text) dark:hover:text-(--dark-hover-text);
+            @apply focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 hover:text-gray-600 focus-visible:ring-2 dark:hover:text-gray-400;
+        }
+
+        &.fi-disabled,
+        &[disabled] {
+            @apply cursor-default opacity-70;
+
+            &:not([x-tooltip]) {
+                @apply pointer-events-none;
+            }
+        }
+
+        &.fi-size-xs {
+            @apply size-7;
+
+            &:has(.fi-icon.fi-size-sm) {
+                @apply -m-1.5;
+            }
+
+            &:has(.fi-icon.fi-size-md) {
+                @apply -m-1;
+            }
+
+            &:has(.fi-icon.fi-size-lg) {
+                @apply -m-0.5;
+            }
+        }
+
+        &.fi-size-sm {
+            @apply size-8;
+
+            &:has(.fi-icon.fi-size-sm) {
+                @apply -m-2;
+            }
+
+            &:has(.fi-icon.fi-size-md) {
+                @apply -m-1.5;
+            }
+
+            &:has(.fi-icon.fi-size-lg) {
+                @apply -m-1;
+            }
+        }
+
+        &.fi-size-md {
+            &:has(.fi-icon.fi-size-sm) {
+                @apply -m-2.5;
+            }
+
+            &:has(.fi-icon.fi-size-lg) {
+                @apply -m-1.5;
+            }
+        }
+
+        &.fi-size-lg {
+            @apply size-10;
+
+            &:has(.fi-icon.fi-size-sm) {
+                @apply -m-3;
+            }
+
+            &:has(.fi-icon.fi-size-md) {
+                @apply -m-2.5;
+            }
+
+            &:has(.fi-icon.fi-size-lg) {
+                @apply -m-2;
+            }
+        }
+
+        &.fi-size-xl {
+            @apply size-11;
+
+            &:has(.fi-icon.fi-size-sm) {
+                @apply -m-3.5;
+            }
+
+            &:has(.fi-icon.fi-size-md) {
+                @apply -m-3;
+            }
+
+            &:has(.fi-icon.fi-size-lg) {
+                @apply -m-2.5;
+            }
+        }
+
+        &.fi-color {
+            @apply text-(--text) dark:text-(--dark-text);
+
+            &:not(.fi-disabled):not([disabled]) {
+                @apply focus-visible:ring-color-600 dark:focus-visible:ring-color-500 hover:text-(--hover-text) dark:hover:text-(--dark-hover-text);
+            }
+        }
+
+        & > .fi-icon-btn-badge-ctn {
+            @apply absolute start-full top-1 z-[1] w-max -translate-x-1/2 -translate-y-1/2 rounded-md bg-white rtl:translate-x-1/2 dark:bg-gray-900;
+        }
+
+        &:has(+ .fi-btn.fi-labeled-from-sm) {
+            @apply sm:hidden;
+        }
+
+        &:has(+ .fi-btn.fi-labeled-from-md) {
+            @apply md:hidden;
+        }
+
+        &:has(+ .fi-btn.fi-labeled-from-lg) {
+            @apply lg:hidden;
+        }
+
+        &:has(+ .fi-btn.fi-labeled-from-xl) {
+            @apply xl:hidden;
+        }
+
+        &:has(+ .fi-btn.fi-labeled-from-2xl) {
+            @apply 2xl:hidden;
         }
     }
-
-    & > .fi-icon-btn-badge-ctn {
-        @apply absolute start-full top-1 z-[1] w-max -translate-x-1/2 -translate-y-1/2 rounded-md bg-white rtl:translate-x-1/2 dark:bg-gray-900;
-    }
-
-    &:has(+ .fi-btn.fi-labeled-from-sm) {
-        @apply sm:hidden;
-    }
-
-    &:has(+ .fi-btn.fi-labeled-from-md) {
-        @apply md:hidden;
-    }
-
-    &:has(+ .fi-btn.fi-labeled-from-lg) {
-        @apply lg:hidden;
-    }
-
-    &:has(+ .fi-btn.fi-labeled-from-xl) {
-        @apply xl:hidden;
-    }
-
-    &:has(+ .fi-btn.fi-labeled-from-2xl) {
-        @apply 2xl:hidden;
-    }
 }

packages/support/resources/css/components/icon.css

@@ -1,27 +1,29 @@
-.fi-icon {
-    @apply size-5;
-
-    &.fi-size-xs {
-        @apply size-3;
-    }
-
-    &.fi-size-sm {
-        @apply size-4;
-    }
-
-    &.fi-size-md {
+@layer components {
+    .fi-icon {
         @apply size-5;
-    }
 
-    &.fi-size-lg {
-        @apply size-6;
-    }
+        &.fi-size-xs {
+            @apply size-3;
+        }
 
-    &.fi-size-xl {
-        @apply size-7;
-    }
+        &.fi-size-sm {
+            @apply size-4;
+        }
 
-    &.fi-size-2xl {
-        @apply size-8;
+        &.fi-size-md {
+            @apply size-5;
+        }
+
+        &.fi-size-lg {
+            @apply size-6;
+        }
+
+        &.fi-size-xl {
+            @apply size-7;
+        }
+
+        &.fi-size-2xl {
+            @apply size-8;
+        }
     }
 }

packages/support/resources/css/components/infolists/entries/color.css

@@ -1,34 +0,0 @@
-.fi-in-color {
-    @apply flex w-full gap-1.5;
-
-    &.fi-wrapped {
-        @apply flex-wrap;
-    }
-
-    &.fi-align-start,
-    &.fi-align-left {
-        @apply justify-start;
-    }
-
-    &.fi-align-center {
-        @apply justify-center;
-    }
-
-    &.fi-align-end,
-    &.fi-align-right {
-        @apply justify-end;
-    }
-
-    &.fi-align-justify,
-    &.fi-align-between {
-        @apply justify-between;
-    }
-
-    & > .fi-in-color-item {
-        @apply size-6 rounded-md;
-
-        &.fi-copyable {
-            @apply cursor-pointer;
-        }
-    }
-}

packages/support/resources/css/components/infolists/entries/icon.css

@@ -1,38 +0,0 @@
-.fi-in-icon {
-    @apply flex w-full gap-1.5;
-
-    &.fi-wrapped {
-        @apply flex-wrap;
-    }
-
-    &.fi-in-icon-has-line-breaks {
-        @apply flex-col;
-    }
-
-    &.fi-align-start,
-    &.fi-align-left {
-        @apply justify-start;
-    }
-
-    &.fi-align-center {
-        @apply justify-center;
-    }
-
-    &.fi-align-end,
-    &.fi-align-right {
-        @apply justify-end;
-    }
-
-    &.fi-align-justify,
-    &.fi-align-between {
-        @apply justify-between;
-    }
-
-    & > .fi-icon {
-        @apply text-gray-400 dark:text-gray-500;
-
-        &.fi-color {
-            @apply text-(--text) dark:text-(--dark-text);
-        }
-    }
-}

packages/support/resources/css/components/infolists/entries/image.css

@@ -1,119 +0,0 @@
-.fi-in-image {
-    @apply flex w-full items-center gap-1.5;
-
-    & img {
-        @apply max-w-none object-cover object-center;
-    }
-
-    &.fi-circular {
-        & img {
-            @apply rounded-full;
-        }
-    }
-
-    &.fi-in-image-ring {
-        & img,
-        & .fi-in-image-limited-remaining-text {
-            @apply ring ring-white dark:ring-gray-900;
-        }
-
-        &.fi-in-image-ring-1 {
-            & img,
-            & .fi-in-image-limited-remaining-text {
-                @apply ring-1;
-            }
-        }
-
-        &.fi-in-image-ring-2 {
-            & img,
-            & .fi-in-image-limited-remaining-text {
-                @apply ring-2;
-            }
-        }
-
-        &.fi-in-image-ring-4 {
-            & img,
-            & .fi-in-image-limited-remaining-text {
-                @apply ring-4;
-            }
-        }
-    }
-
-    &.fi-in-image-overlap-1 {
-        @apply gap-x-0 -space-x-1;
-    }
-
-    &.fi-in-image-overlap-2 {
-        @apply gap-x-0 -space-x-2;
-    }
-
-    &.fi-in-image-overlap-3 {
-        @apply gap-x-0 -space-x-3;
-    }
-
-    &.fi-in-image-overlap-4 {
-        @apply gap-x-0 -space-x-4;
-    }
-
-    &.fi-in-image-overlap-5 {
-        @apply gap-x-0 -space-x-5;
-    }
-
-    &.fi-in-image-overlap-6 {
-        @apply gap-x-0 -space-x-6;
-    }
-
-    &.fi-in-image-overlap-7 {
-        @apply gap-x-0 -space-x-7;
-    }
-
-    &.fi-in-image-overlap-8 {
-        @apply gap-x-0 -space-x-8;
-    }
-
-    &.fi-wrapped {
-        @apply flex-wrap;
-    }
-
-    &.fi-align-start,
-    &.fi-align-left {
-        @apply justify-start;
-    }
-
-    &.fi-align-center {
-        @apply justify-center;
-    }
-
-    &.fi-align-end,
-    &.fi-align-right {
-        @apply justify-end;
-    }
-
-    &.fi-align-justify,
-    &.fi-align-between {
-        @apply justify-between;
-    }
-
-    &.fi-stacked {
-        & .fi-in-image-limited-remaining-text {
-            @apply rounded-full bg-gray-100 dark:bg-gray-800;
-        }
-    }
-
-    & .fi-in-image-limited-remaining-text {
-        @apply flex items-center justify-center text-sm font-medium text-gray-500 dark:text-gray-400;
-
-        &.fi-size-xs {
-            @apply text-xs;
-        }
-
-        &.fi-size-base,
-        &.fi-size-md {
-            @apply text-base;
-        }
-
-        &.fi-size-lg {
-            @apply text-lg;
-        }
-    }
-}

packages/support/resources/css/components/infolists/entries/key-value.css

@@ -1,23 +0,0 @@
-.fi-in-key-value {
-    @apply w-full table-auto divide-y divide-gray-200 rounded-lg bg-white ring-1 shadow-xs ring-gray-950/5 dark:divide-white/5 dark:bg-white/5 dark:ring-white/10;
-
-    & th {
-        @apply px-3 py-2 text-start text-sm font-medium text-gray-700 dark:text-gray-200;
-    }
-
-    & tbody {
-        @apply divide-y divide-gray-200 font-mono text-base sm:text-sm sm:leading-6 dark:divide-white/5;
-    }
-
-    & tr {
-        @apply divide-x divide-gray-200 rtl:divide-x-reverse dark:divide-white/5;
-    }
-
-    & td {
-        @apply w-1/2 px-3 py-1.5;
-
-        &.fi-in-placeholder {
-            @apply w-full py-2 text-center font-sans;
-        }
-    }
-}

packages/support/resources/css/components/infolists/entries/repeatable.css

@@ -1,15 +0,0 @@
-.fi-in-repeatable {
-    &ul {
-        @apply gap-4;
-    }
-
-    & .fi-in-repeatable-item {
-        @apply block;
-    }
-
-    &.fi-contained {
-        & .fi-in-repeatable-item {
-            @apply rounded-xl bg-white p-4 ring-1 shadow-xs ring-gray-950/5 dark:bg-white/5 dark:ring-white/10;
-        }
-    }
-}

packages/support/resources/css/components/infolists/entries/text.css

@@ -1,236 +0,0 @@
-.fi-in-text {
-    @apply w-full;
-
-    &.fi-in-text-affixed {
-        @apply flex gap-3;
-    }
-
-    & .fi-in-text-affixed-content {
-        @apply min-w-0 flex-1;
-    }
-
-    & .fi-in-text-affix {
-        @apply flex items-center gap-3 self-stretch;
-    }
-
-    &.fi-in-text-list-limited {
-        /* Add space between content and list limit message. */
-        @apply flex flex-col;
-
-        &.fi-in-text-has-badges {
-            /* When the content contains badges, more gap is required to balance the spacing. */
-            @apply gap-y-2;
-        }
-
-        &:not(.fi-in-text-has-badges) {
-            /* When the content does not contain badges, less gap is required to balance the spacing. */
-            @apply gap-y-1;
-        }
-    }
-
-    &ul.fi-bulleted,
-    &.fi-bulleted ul {
-        @apply list-inside list-disc;
-    }
-
-    &:not(.fi-in-text-has-line-breaks) {
-        &ul.fi-in-text-has-badges,
-        &.fi-in-text-has-badges ul {
-            /* A list of badges without line breaks need to remain on the same line, not wrap */
-            @apply flex gap-x-1.5;
-
-            &.fi-wrapped,
-            &:is(.fi-wrapped ul) {
-                /* When wrap is enabled, some badges can remain on the same line as others and some should wrap */
-                @apply flex-wrap gap-y-1;
-            }
-        }
-    }
-
-    &ul.fi-in-text-has-badges,
-    &.fi-in-text-has-badges ul {
-        &.fi-in-text-has-line-breaks,
-        &:is(.fi-in-text-has-line-breaks ul) {
-            /* Add vertical gap between badges in a list with line breaks */
-            @apply flex flex-col gap-y-1;
-        }
-
-        &:not(ul.fi-in-text-has-line-breaks),
-        &:not(.fi-in-text-has-line-breaks ul) {
-            /* A list of badges without line breaks need to remain on the same line, not wrap */
-            @apply flex gap-x-1.5;
-
-            &.fi-wrapped,
-            &:is(.fi-wrapped ul) {
-                /* When wrap is enabled, some badges can remain on the same line as others and some should wrap */
-                @apply flex-wrap gap-y-1;
-            }
-        }
-    }
-
-    &.fi-wrapped:not(.fi-in-text-has-badges.fi-in-text-has-line-breaks) {
-        /* If the content has badges, and they have line breaks, setting `whitespace-normal` sometimes pushes the badge
-         onto the line below the bullet point if there is one, and badge content does not need to wrap anyway. */
-        @apply whitespace-normal;
-
-        & .fi-badge,
-        & .fi-in-text-list-limited-message {
-            /* Badge content and list limited message and actions should not wrap. */
-            @apply whitespace-nowrap;
-        }
-    }
-
-    & > .fi-in-text-list-limited-message {
-        @apply text-sm text-gray-500 dark:text-gray-400;
-    }
-
-    &.fi-align-center {
-        @apply text-center;
-
-        &ul,
-        & ul {
-            @apply justify-center;
-        }
-    }
-
-    &.fi-align-end,
-    &.fi-align-right {
-        @apply text-end;
-
-        &ul,
-        & ul {
-            @apply justify-end;
-        }
-    }
-
-    &.fi-align-justify,
-    &.fi-align-between {
-        @apply text-justify;
-
-        &ul,
-        & ul {
-            @apply justify-between;
-        }
-    }
-}
-
-.fi-in-text-item {
-    @apply text-gray-950 dark:text-white;
-
-    & a {
-        @apply hover:underline focus-visible:underline;
-    }
-
-    &.fi-in-text-item-prose {
-        @apply prose dark:prose-invert max-w-none;
-
-        & > *:first-child {
-            @apply mt-0;
-        }
-
-        & > *:last-child {
-            @apply mb-0;
-        }
-    }
-
-    &:not(.fi-bulleted li.fi-in-text-item) {
-        /* Line clamping sets the `display` property of the list item to `-webkit-box` instead of `list-item`, which hides the bullet point. */
-        @apply line-clamp-(--line-clamp,none);
-    }
-
-    &.fi-copyable {
-        @apply cursor-pointer;
-    }
-
-    &.fi-size-xs {
-        @apply text-xs;
-    }
-
-    &.fi-size-sm {
-        @apply text-sm leading-6;
-    }
-
-    &.fi-size-md {
-        @apply text-base;
-    }
-
-    &.fi-size-lg {
-        @apply text-lg;
-    }
-
-    &.fi-font-thin {
-        @apply font-thin;
-    }
-
-    &.fi-font-extralight {
-        @apply font-extralight;
-    }
-
-    &.fi-font-light {
-        @apply font-light;
-    }
-
-    &.fi-font-normal {
-        @apply font-normal;
-    }
-
-    &.fi-font-medium {
-        @apply font-medium;
-    }
-
-    &.fi-font-semibold {
-        @apply font-semibold;
-    }
-
-    &.fi-font-bold {
-        @apply font-bold;
-    }
-
-    &.fi-font-extrabold {
-        @apply font-extrabold;
-    }
-
-    &.fi-font-black {
-        @apply font-black;
-    }
-
-    &.fi-font-sans {
-        @apply font-sans;
-    }
-
-    &.fi-font-serif {
-        @apply font-serif;
-    }
-
-    &.fi-font-mono {
-        @apply font-mono;
-    }
-
-    &.fi-color {
-        @apply text-(--text) dark:text-(--dark-text);
-
-        &li::marker {
-            @apply text-gray-950 dark:text-white;
-        }
-    }
-
-    &.fi-color-gray {
-        @apply text-gray-500 dark:text-gray-400;
-
-        &li::marker {
-            @apply text-gray-950 dark:text-white;
-        }
-    }
-
-    & > .fi-icon {
-        @apply shrink-0 text-gray-400 dark:text-gray-500;
-
-        &.fi-color {
-            @apply text-color-500;
-        }
-    }
-
-    & > .fi-icon {
-        @apply -mt-1 inline-block;
-    }
-}

packages/support/resources/css/components/infolists/entry.css

@@ -1,68 +0,0 @@
-.fi-in-entry {
-    @apply grid gap-y-2;
-
-    &.fi-in-entry-has-inline-label {
-        @apply sm:grid-cols-3 sm:items-start sm:gap-x-4;
-
-        & .fi-in-entry-content-col {
-            @apply sm:col-span-2;
-        }
-    }
-
-    & .fi-in-entry-label-ctn {
-        @apply flex items-center gap-x-3;
-    }
-
-    & .fi-in-entry-label {
-        @apply inline-flex items-center gap-x-3 text-sm leading-6 font-medium text-gray-950 dark:text-white;
-
-        &.fi-hidden {
-            @apply sr-only;
-        }
-    }
-
-    & .fi-in-entry-label-col {
-        @apply grid auto-cols-fr gap-y-2;
-    }
-
-    & .fi-in-entry-content-col {
-        @apply grid auto-cols-fr gap-y-2;
-    }
-
-    & .fi-in-entry-content-ctn {
-        @apply flex w-full items-center gap-x-3;
-    }
-
-    & .fi-in-entry-content {
-        @apply w-full;
-
-        &.fi-align-start {
-            @apply text-start;
-        }
-
-        &.fi-align-center {
-            @apply text-center;
-        }
-
-        &.fi-align-end {
-            @apply text-end;
-        }
-
-        &.fi-align-left {
-            @apply text-left;
-        }
-
-        &.fi-align-right {
-            @apply text-right;
-        }
-
-        &.fi-align-justify,
-        &.fi-align-between {
-            @apply text-justify;
-        }
-    }
-
-    & .fi-in-placeholder {
-        @apply text-sm leading-6 text-gray-400 dark:text-gray-500;
-    }
-}

packages/support/resources/css/components/input/checkbox.css

@@ -1,7 +1,9 @@
-input[type='checkbox'].fi-checkbox-input {
-    @apply text-primary-600 checked:bg-primary-600 focus:ring-primary-600 checked:focus:ring-primary-500/50 dark:text-primary-500 dark:checked:bg-primary-500 dark:focus:ring-primary-500 dark:checked:focus:ring-primary-400/50 rounded border-none bg-white ring-1 shadow-sm ring-gray-950/10 transition duration-75 checked:ring-0 focus:ring-2 focus:ring-offset-0 disabled:pointer-events-none disabled:bg-gray-50 disabled:text-gray-50 disabled:checked:bg-gray-400 disabled:checked:text-gray-400 dark:bg-white/5 dark:ring-white/20 dark:disabled:bg-transparent dark:disabled:ring-white/10 dark:disabled:checked:bg-gray-600;
+@layer components {
+    input[type='checkbox'].fi-checkbox-input {
+        @apply text-primary-600 checked:bg-primary-600 focus:ring-primary-600 checked:focus:ring-primary-500/50 dark:text-primary-500 dark:checked:bg-primary-500 dark:focus:ring-primary-500 dark:checked:focus:ring-primary-400/50 rounded border-none bg-white ring-1 shadow-sm ring-gray-950/10 transition duration-75 checked:ring-0 focus:ring-2 focus:ring-offset-0 disabled:pointer-events-none disabled:bg-gray-50 disabled:text-gray-50 disabled:checked:bg-gray-400 disabled:checked:text-gray-400 dark:bg-white/5 dark:ring-white/20 dark:disabled:bg-transparent dark:disabled:ring-white/10 dark:disabled:checked:bg-gray-600;
 
-    &.fi-invalid {
-        @apply text-danger-600 checked:bg-danger-600 ring-danger-600 focus:ring-danger-600 checked:focus:ring-danger-500/50 dark:text-danger-500 dark:checked:bg-danger-500 dark:ring-danger-500 dark:checked:bg-danger-500 dark:focus:ring-danger-500 dark:checked:focus:ring-danger-400/50;
+        &.fi-invalid {
+            @apply text-danger-600 checked:bg-danger-600 ring-danger-600 focus:ring-danger-600 checked:focus:ring-danger-500/50 dark:text-danger-500 dark:checked:bg-danger-500 dark:ring-danger-500 dark:checked:bg-danger-500 dark:focus:ring-danger-500 dark:checked:focus:ring-danger-400/50;
+        }
     }
 }

packages/support/resources/css/components/input/index.css

@@ -1,38 +1,40 @@
-input.fi-input {
-    /* A fully transparent white background color is used
-     instead transparent to fix a Safari bug
-     where the date/time input "placeholder" colors too dark.
+@layer components {
+    input.fi-input {
+        /* A fully transparent white background color is used
+         instead transparent to fix a Safari bug
+         where the date/time input "placeholder" colors too dark.
 
-     https://github.com/filamentphp/filament/issues/7087 */
+         https://github.com/filamentphp/filament/issues/7087 */
 
-    @apply block w-full border-none bg-white/0 px-3 py-1.5 text-start text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 focus:outline-none disabled:text-gray-500 disabled:[-webkit-text-fill-color:var(--color-gray-500)] disabled:placeholder:[-webkit-text-fill-color:var(--color-gray-400)] sm:text-sm sm:leading-6 dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:var(--color-gray-400)] dark:disabled:placeholder:[-webkit-text-fill-color:var(--color-gray-500)];
+        @apply block w-full border-none bg-white/0 px-3 py-1.5 text-start text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 focus:outline-none disabled:text-gray-500 disabled:[-webkit-text-fill-color:var(--color-gray-500)] disabled:placeholder:[-webkit-text-fill-color:var(--color-gray-400)] sm:text-sm sm:leading-6 dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:var(--color-gray-400)] dark:disabled:placeholder:[-webkit-text-fill-color:var(--color-gray-500)];
 
-    &.fi-input-has-inline-prefix {
-        @apply ps-0;
-    }
+        &.fi-input-has-inline-prefix {
+            @apply ps-0;
+        }
 
-    &.fi-input-has-inline-suffix {
-        @apply pe-0;
-    }
+        &.fi-input-has-inline-suffix {
+            @apply pe-0;
+        }
 
-    &.fi-align-center {
-        @apply text-center;
-    }
+        &.fi-align-center {
+            @apply text-center;
+        }
 
-    &.fi-align-end {
-        @apply text-end;
-    }
+        &.fi-align-end {
+            @apply text-end;
+        }
 
-    &.fi-align-left {
-        @apply text-left;
-    }
+        &.fi-align-left {
+            @apply text-left;
+        }
 
-    &.fi-align-right {
-        @apply text-end;
-    }
+        &.fi-align-right {
+            @apply text-end;
+        }
 
-    &.fi-align-justify,
-    &.fi-align-between {
-        @apply text-justify;
+        &.fi-align-justify,
+        &.fi-align-between {
+            @apply text-justify;
+        }
     }
 }

packages/support/resources/css/components/input/one-time-code.css

@@ -1,19 +1,21 @@
-input[type='text'].fi-one-time-code-input {
-    @apply absolute inset-0 block border-none bg-transparent font-mono tracking-[1.665rem] text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:var(--color-gray-500)] disabled:placeholder:[-webkit-text-fill-color:var(--color-gray-400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:var(--color-gray-400)] dark:disabled:placeholder:[-webkit-text-fill-color:var(--color-gray-500)];
+@layer components {
+    input[type='text'].fi-one-time-code-input {
+        @apply absolute inset-0 block border-none bg-transparent font-mono tracking-[1.665rem] text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:var(--color-gray-500)] disabled:placeholder:[-webkit-text-fill-color:var(--color-gray-400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:var(--color-gray-400)] dark:disabled:placeholder:[-webkit-text-fill-color:var(--color-gray-500)];
 
-    &.fi-valid {
-        @apply caret-transparent;
+        &.fi-valid {
+            @apply caret-transparent;
+        }
     }
-}
 
-.fi-one-time-code-input-ctn {
-    @apply relative h-12;
+    .fi-one-time-code-input-ctn {
+        @apply relative h-12;
 
-    & > .fi-one-time-code-input-digit-field {
-        @apply inline-block h-full w-8 rounded-lg border border-gray-950/10 bg-white dark:border-white/20 dark:bg-white/5;
+        & > .fi-one-time-code-input-digit-field {
+            @apply inline-block h-full w-8 rounded-lg border border-gray-950/10 bg-white dark:border-white/20 dark:bg-white/5;
 
-        &.fi-active {
-            @apply border-primary-600 dark:border-primary-500 border-2;
+            &.fi-active {
+                @apply border-primary-600 dark:border-primary-500 border-2;
+            }
         }
     }
 }

packages/support/resources/css/components/input/radio.css

@@ -1,7 +1,9 @@
-input[type='radio'].fi-radio-input {
-    @apply text-primary-600 checked:bg-primary-600 focus:ring-primary-600 checked:focus:ring-primary-500/50 dark:text-primary-500 dark:checked:bg-primary-500 dark:focus:ring-primary-500 dark:checked:focus:ring-primary-400/50 border-none bg-white ring-1 shadow-sm ring-gray-950/10 transition duration-75 checked:ring-0 focus:ring-2 focus:ring-offset-0 disabled:bg-gray-50 disabled:text-gray-50 disabled:checked:bg-gray-400 disabled:checked:text-gray-400 dark:bg-white/5 dark:ring-white/20 dark:disabled:bg-transparent dark:disabled:ring-white/10 dark:disabled:checked:bg-gray-600;
+@layer components {
+    input[type='radio'].fi-radio-input {
+        @apply text-primary-600 checked:bg-primary-600 focus:ring-primary-600 checked:focus:ring-primary-500/50 dark:text-primary-500 dark:checked:bg-primary-500 dark:focus:ring-primary-500 dark:checked:focus:ring-primary-400/50 border-none bg-white ring-1 shadow-sm ring-gray-950/10 transition duration-75 checked:ring-0 focus:ring-2 focus:ring-offset-0 disabled:bg-gray-50 disabled:text-gray-50 disabled:checked:bg-gray-400 disabled:checked:text-gray-400 dark:bg-white/5 dark:ring-white/20 dark:disabled:bg-transparent dark:disabled:ring-white/10 dark:disabled:checked:bg-gray-600;
 
-    &.fi-invalid {
-        @apply text-danger-600 checked:bg-danger-600 ring-danger-600 focus:ring-danger-600 checked:focus:ring-danger-500/50 dark:text-danger-500 dark:checked:bg-danger-500 dark:ring-danger-500 dark:checked:bg-danger-500 dark:focus:ring-danger-500 dark:checked:focus:ring-danger-400/50;
+        &.fi-invalid {
+            @apply text-danger-600 checked:bg-danger-600 ring-danger-600 focus:ring-danger-600 checked:focus:ring-danger-500/50 dark:text-danger-500 dark:checked:bg-danger-500 dark:ring-danger-500 dark:checked:bg-danger-500 dark:focus:ring-danger-500 dark:checked:focus:ring-danger-400/50;
+        }
     }
 }