🆙 Add cms i using 🆙

Optimized Atomcms daily updated/vendor/filament/schemas/resources/css/components/actions.css

@@ -0,0 +1,29 @@
+.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 shadow-lg ring-1 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;
+    }
+}

Optimized Atomcms daily updated/vendor/filament/schemas/resources/css/components/flex.css

@@ -0,0 +1,87 @@
+.fi-sc-flex {
+    @apply flex gap-6;
+
+    &.fi-dense {
+        @apply gap-3;
+    }
+
+    & > .fi-hidden {
+        @apply hidden;
+    }
+
+    & > .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;
+        }
+    }
+}

Optimized Atomcms daily updated/vendor/filament/schemas/resources/css/components/form.css

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

Optimized Atomcms daily updated/vendor/filament/schemas/resources/css/components/fused-group.css

@@ -0,0 +1,333 @@
+.fi-sc-fused-group {
+    & > .fi-sc {
+        @apply focus-within:ring-primary-600 dark:focus-within:ring-primary-500 shadow-sm ring-1 ring-gray-950/10 focus-within:ring-2 dark:ring-white/20;
+    }
+
+    & .fi-sc {
+        @apply divide-y divide-gray-950/10 rounded-lg dark:divide-white/20;
+
+        & .fi-sc-component {
+            @apply min-h-full;
+
+            & .fi-fo-field {
+                @apply min-h-full;
+            }
+
+            & .fi-input {
+                @apply min-h-full;
+            }
+        }
+
+        & > :first-child .fi-input-wrp {
+            @apply rounded-t-lg;
+        }
+
+        & > :last-child .fi-input-wrp {
+            @apply rounded-b-lg;
+        }
+
+        &.fi-grid-cols {
+            @apply divide-x divide-y-0;
+
+            & > :first-child .fi-input-wrp {
+                @apply rounded-se-none rounded-es-lg;
+            }
+
+            & > :last-child .fi-input-wrp {
+                @apply rounded-se-lg rounded-es-none;
+            }
+        }
+
+        &.sm\:fi-grid-cols {
+            @apply sm:divide-x sm:divide-y-0;
+
+            & > :first-child .fi-input-wrp {
+                @apply sm:rounded-se-none sm:rounded-es-lg;
+            }
+
+            & > :last-child .fi-input-wrp {
+                @apply sm:rounded-se-lg sm:rounded-es-none;
+            }
+        }
+
+        &.md\:fi-grid-cols {
+            @apply md:divide-x md:divide-y-0;
+
+            & > :first-child .fi-input-wrp {
+                @apply md:rounded-se-none md:rounded-es-lg;
+            }
+
+            & > :last-child .fi-input-wrp {
+                @apply md:rounded-se-lg md:rounded-es-none;
+            }
+        }
+
+        &.lg\:fi-grid-cols {
+            @apply lg:divide-x lg:divide-y-0;
+
+            & > :first-child .fi-input-wrp {
+                @apply lg:rounded-se-none lg:rounded-es-lg;
+            }
+
+            & > :last-child .fi-input-wrp {
+                @apply lg:rounded-se-lg lg:rounded-es-none;
+            }
+        }
+
+        &.xl\:fi-grid-cols {
+            @apply xl:divide-x xl:divide-y-0;
+
+            & > :first-child .fi-input-wrp {
+                @apply xl:rounded-se-none xl:rounded-es-lg;
+            }
+
+            & > :last-child .fi-input-wrp {
+                @apply xl:rounded-se-lg xl:rounded-es-none;
+            }
+        }
+
+        &.\32xl\:fi-grid-cols {
+            @apply 2xl:divide-x 2xl:divide-y-0;
+
+            & > :first-child .fi-input-wrp {
+                @apply 2xl:rounded-se-none 2xl:rounded-es-lg;
+            }
+
+            & > :last-child .fi-input-wrp {
+                @apply 2xl:rounded-se-lg 2xl:rounded-es-none;
+            }
+        }
+
+        @supports (container-type: inline-size) {
+            &.\@3xs\:fi-grid-cols {
+                @apply @3xs:divide-x @3xs:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @3xs:rounded-se-none @3xs:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @3xs:rounded-se-lg @3xs:rounded-es-none;
+                }
+            }
+
+            &.\@2xs\:fi-grid-cols {
+                @apply @2xs:divide-x @2xs:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @2xs:rounded-se-none @2xs:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @2xs:rounded-se-lg @2xs:rounded-es-none;
+                }
+            }
+
+            &.\@xs\:fi-grid-cols {
+                @apply @xs:divide-x @xs:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @xs:rounded-se-none @xs:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @xs:rounded-se-lg @xs:rounded-es-none;
+                }
+            }
+
+            &.\@sm\:fi-grid-cols {
+                @apply @sm:divide-x @sm:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @sm:rounded-se-none @sm:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @sm:rounded-se-lg @sm:rounded-es-none;
+                }
+            }
+
+            &.\@md\:fi-grid-cols {
+                @apply @md:divide-x @md:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @md:rounded-se-none @md:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @md:rounded-se-lg @md:rounded-es-none;
+                }
+            }
+
+            &.\@lg\:fi-grid-cols {
+                @apply @lg:divide-x @lg:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @lg:rounded-se-none @lg:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @lg:rounded-se-lg @lg:rounded-es-none;
+                }
+            }
+
+            &.\@xl\:fi-grid-cols {
+                @apply @xl:divide-x @xl:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @xl:rounded-se-none @xl:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @xl:rounded-se-lg @xl:rounded-es-none;
+                }
+            }
+
+            &.\@2xl\:fi-grid-cols {
+                @apply @2xl:divide-x @2xl:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @2xl:rounded-se-none @2xl:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @2xl:rounded-se-lg @2xl:rounded-es-none;
+                }
+            }
+
+            &.\@3xl\:fi-grid-cols {
+                @apply @3xl:divide-x @3xl:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @3xl:rounded-se-none @3xl:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @3xl:rounded-se-lg @3xl:rounded-es-none;
+                }
+            }
+
+            &.\@4xl\:fi-grid-cols {
+                @apply @4xl:divide-x @4xl:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @4xl:rounded-se-none @4xl:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @4xl:rounded-se-lg @4xl:rounded-es-none;
+                }
+            }
+
+            &.\@5xl\:fi-grid-cols {
+                @apply @5xl:divide-x @5xl:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @5xl:rounded-se-none @5xl:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @5xl:rounded-se-lg @5xl:rounded-es-none;
+                }
+            }
+
+            &.\@6xl\:fi-grid-cols {
+                @apply @6xl:divide-x @6xl:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @6xl:rounded-se-none @6xl:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @6xl:rounded-se-lg @6xl:rounded-es-none;
+                }
+            }
+
+            &.\@7xl\:fi-grid-cols {
+                @apply @7xl:divide-x @7xl:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @7xl:rounded-se-none @7xl:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @7xl:rounded-se-lg @7xl:rounded-es-none;
+                }
+            }
+        }
+
+        @supports not (container-type: inline-size) {
+            &.\!\@sm\:fi-grid-cols {
+                @apply sm:divide-x sm:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply sm:rounded-se-none sm:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply sm:rounded-se-lg sm:rounded-es-none;
+                }
+            }
+
+            &.\!\@md\:fi-grid-cols {
+                @apply md:divide-x md:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply md:rounded-se-none md:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply md:rounded-se-lg md:rounded-es-none;
+                }
+            }
+
+            &.\!\@lg\:fi-grid-cols {
+                @apply lg:divide-x lg:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply lg:rounded-se-none lg:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply lg:rounded-se-lg lg:rounded-es-none;
+                }
+            }
+
+            &.\!\@xl\:fi-grid-cols {
+                @apply xl:divide-x xl:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply xl:rounded-se-none xl:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply xl:rounded-se-lg xl:rounded-es-none;
+                }
+            }
+
+            &.\!\@2xl\:fi-grid-cols {
+                @apply 2xl:divide-x 2xl:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply 2xl:rounded-se-none 2xl:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply 2xl:rounded-se-lg 2xl:rounded-es-none;
+                }
+            }
+        }
+    }
+
+    & .fi-input-wrp {
+        @apply rounded-none shadow-none ring-0;
+
+        &:not(.fi-disabled):not(:has(.fi-ac-action:focus)) {
+            @apply focus-within:ring-0;
+
+            &.fi-invalid {
+                @apply focus-within:ring-0;
+            }
+        }
+    }
+}

Optimized Atomcms daily updated/vendor/filament/schemas/resources/css/components/icon.css

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

Optimized Atomcms daily updated/vendor/filament/schemas/resources/css/components/image.css

@@ -0,0 +1,12 @@
+.fi-sc-image {
+    @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;
+    }
+}

Optimized Atomcms daily updated/vendor/filament/schemas/resources/css/components/section.css

@@ -0,0 +1,11 @@
+.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;
+        }
+    }
+}

Optimized Atomcms daily updated/vendor/filament/schemas/resources/css/components/tabs.css

@@ -0,0 +1,35 @@
+.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 shadow-xs ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
+
+        & .fi-sc-tabs-tab {
+            &.fi-active {
+                @apply mt-0 p-6;
+            }
+        }
+    }
+
+    &.fi-vertical {
+        @apply flex-row;
+
+        & .fi-sc-tabs-tab {
+            &.fi-active {
+                @apply ms-6 mt-0 flex-1;
+            }
+        }
+    }
+}

Optimized Atomcms daily updated/vendor/filament/schemas/resources/css/components/text.css

@@ -0,0 +1,77 @@
+.fi-sc-text {
+    &.fi-copyable {
+        @apply cursor-pointer;
+    }
+
+    &.fi-font-sans {
+        @apply font-sans;
+    }
+
+    &.fi-font-serif {
+        @apply font-serif;
+    }
+
+    &.fi-font-mono {
+        @apply font-mono;
+    }
+
+    &:not(.fi-badge) {
+        @apply inline-block text-sm break-words text-gray-600 dark:text-gray-400;
+
+        &.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-size-lg {
+            @apply text-lg;
+        }
+
+        &.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;
+        }
+    }
+}

Optimized Atomcms daily updated/vendor/filament/schemas/resources/css/components/unordered-list.css

@@ -0,0 +1,15 @@
+.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;
+    }
+}

Optimized Atomcms daily updated/vendor/filament/schemas/resources/css/components/wizard.css

@@ -0,0 +1,181 @@
+.fi-sc-wizard {
+    @apply flex flex-col;
+
+    & .fi-sc-wizard-header {
+        @apply grid md:grid-flow-col md:overflow-x-auto;
+
+        & .fi-sc-wizard-header-step {
+            @apply relative flex;
+
+            &:not(.fi-active) {
+                @apply hidden md: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-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 {
+                        @apply border-gray-300 dark:border-gray-600;
+
+                        & .fi-sc-wizard-header-step-number {
+                            @apply text-gray-500 dark:text-gray-400;
+                        }
+
+                        & .fi-sc-wizard-header-step-text {
+                            & .fi-sc-wizard-header-step-label {
+                                @apply text-gray-500 dark:text-gray-400;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    & .fi-sc-wizard-step {
+        @apply outline-hidden;
+
+        &:not(.fi-active) {
+            @apply invisible absolute h-0 overflow-hidden p-0;
+        }
+    }
+
+    &:not(.fi-sc-wizard-header-hidden) {
+        & .fi-sc-wizard-step {
+            &.fi-active {
+                @apply mt-6;
+            }
+        }
+    }
+
+    & .fi-sc-wizard-footer {
+        @apply flex items-center justify-between gap-x-3;
+
+        & > .fi-hidden {
+            @apply hidden;
+        }
+
+        & > .fi-disabled {
+            @apply pointer-events-none opacity-70;
+        }
+    }
+
+    &.fi-contained {
+        @apply rounded-xl bg-white shadow-xs ring-1 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 shadow-xs ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
+        }
+
+        & .fi-sc-wizard-footer {
+            @apply mt-6;
+        }
+    }
+}

Optimized Atomcms daily updated/vendor/filament/schemas/resources/css/index.css

@@ -0,0 +1,12 @@
+@import './components/actions.css' layer(components);
+@import './components/flex.css' layer(components);
+@import './components/form.css' layer(components);
+@import './components/fused-group.css' layer(components);
+@import './components/icon.css' layer(components);
+@import './components/image.css' layer(components);
+@import './components/section.css' layer(components);
+@import './components/tabs.css' layer(components);
+@import './components/text.css' layer(components);
+@import './components/unordered-list.css' layer(components);
+@import './components/wizard.css' layer(components);
+@import './schema.css' layer(components);

Optimized Atomcms daily updated/vendor/filament/schemas/resources/css/schema.css

@@ -0,0 +1,88 @@
+.fi-sc {
+    @apply text-sm;
+
+    &.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;
+        }
+    }
+}