@indice/ng-components 0.4.0-beta.9 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indice/ng-components",
-  "version": "0.4.0-beta.9",
+  "version": "0.4.1",
   "description": "Indice common components for Angular v20",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",
     "@angular/router": ">=20.0.0",
-    "@indice/ng-auth": ">=0.3.5 || 0.4.0-beta.9",
+    "@indice/ng-auth": ">=0.4.1",
     "oidc-client-ts": "^3.0.1",
     "rxjs": ">=7.8.1",
     "tailwindcss": "^4.1.16",

package/src/assets/styles/advanced-search.css

@@ -1,57 +1,39 @@
+.advanced-search-filter {
+  @apply flex gap-6 mb-2 pr-2;
+}
 
+.advanced-search-filter-value-container {
+  @apply flex gap-6 mb-6;
+}
 
-  .advanced-search-container {
+.advanced-search-filter-value-label {
+  @apply block;
+}
 
-  }
+.advanced-search-filter-operator-label {
+  @apply block;
+}
 
-  .advanced-search-filter {
-    @apply flex gap-6 mb-2 pr-2;
-  }
+.advanced-search-filter-value-input {
+  @apply w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm;
+}
 
-  .advanced-search-filter-field-container {
+.advanced-search-filter-value-input-daterange-from {
+  @apply  mt-6 p-2;
+}
 
-  }
+.advanced-search-filter-value-input-daterange-to {
+  @apply  mt-6 p-2;
+}
 
-  .advanced-search-filter-value-container {
-    @apply flex gap-6 mb-6;
-  }
+.advanced-search-chips {
+  @apply inline-flex rounded-full items-center mx-2 mb-4 py-1 pl-3 pr-1 text-sm font-medium bg-gray-300 text-gray-700;
+}
 
-  .advanced-search-filter-field-label {
+.advanced-search-chips-remove-filter {
+  @apply flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-gray-400 hover:bg-gray-200 hover:text-gray-500 focus:outline-none focus:bg-gray-500 focus:text-white;
+}
 
-  }
-
-  .advanced-search-filter-value-label {
-    @apply block;
-  }
-
-  .advanced-search-filter-operator-container {
-
-  }
-
-  .advanced-search-filter-operator-label {
-    @apply block;
-  }
-
-  .advanced-search-filter-value-input {
-    @apply w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm;
-  }
-
-  .advanced-search-filter-value-input-daterange-from {
-    @apply  mt-6 p-2;
-  }
-
-  .advanced-search-filter-value-input-daterange-to {
-    @apply  mt-6 p-2;
-  }
-
-  .advanced-search-chips {
-    @apply inline-flex rounded-full items-center mx-2 mb-4 py-1 pl-3 pr-1 text-sm font-medium bg-gray-300 text-gray-700;
-  }
-
-  .advanced-search-chips-remove-filter {
-    @apply flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-gray-400 hover:bg-gray-200 hover:text-gray-500 focus:outline-none focus:bg-gray-500 focus:text-white;
-  }
-
-  .advanced-search-chips.disabled .advanced-search-chips-remove-filter:active {
-    @apply transform-none;
-  }
+.advanced-search-chips.disabled .advanced-search-chips-remove-filter:active {
+  @apply transform-none;
+}

package/src/assets/styles/avatar-initials.css

@@ -1,37 +1,35 @@
+.avatar-container {
+  @apply inline-flex items-center justify-center h-8 w-8 rounded-full overflow-hidden;
+}
 
+.avatar-container-large {
+  @apply inline-flex items-center justify-center h-12 w-12 rounded-full;
+}
 
-  .avatar-container {
-    @apply inline-flex items-center justify-center h-8 w-8 rounded-full overflow-hidden;
-  }
-
-  .avatar-container-large {
-    @apply inline-flex items-center justify-center h-12 w-12 rounded-full;
-  }
-
-  .avatar-text {
-    @apply text-sm font-medium leading-none text-blue-300;
-  }
+.avatar-text {
+  @apply text-sm font-medium leading-none text-blue-300;
+}
 
-  .avatar-text-large {
-    @apply text-xl font-medium leading-none text-white;
-  }
+.avatar-text-large {
+  @apply text-xl font-medium leading-none text-white;
+}
 
 
 .circle {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+display: flex;
+justify-content: center;
+align-items: center;
 }
 
 .circle img {
-  border-radius: 50%;
-  width: 60px;
-  height: 60px;
+border-radius: 50%;
+width: 60px;
+height: 60px;
 }
 
 .circle .initials {
-  color: #FFFFFF;
-  font-size: 20px;
-  line-height: 19px;
-  letter-spacing: 0.2625px;
+color: #FFFFFF;
+font-size: 20px;
+line-height: 19px;
+letter-spacing: 0.2625px;
 }

package/src/assets/styles/cards.css

@@ -1,85 +1,84 @@
-
-  .card-deck-busy{
-    @apply animate-pulse;
-  }
+.card-deck-busy{
+  @apply animate-pulse;
+}
   
-  .cards-deck-1 {
-    @apply grid grid-cols-1 gap-0 sm:grid-cols-1 lg:grid-cols-1;
-  }
+.cards-deck-1 {
+  @apply grid grid-cols-1 gap-0 sm:grid-cols-1 lg:grid-cols-1;
+}
 
-  .cards-deck-2 {
-    @apply grid grid-cols-1 gap-5 sm:grid-cols-1 lg:grid-cols-2;
-  }
+.cards-deck-2 {
+  @apply grid grid-cols-1 gap-5 sm:grid-cols-1 lg:grid-cols-2;
+}
 
-  .cards-deck-3 {
-    @apply grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3;
-  }
+.cards-deck-3 {
+  @apply grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3;
+}
 
-  .cards-deck-4 {
-    @apply grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4;
-  }
+.cards-deck-4 {
+  @apply grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4;
+}
 
-  .card {
-    @apply relative h-full border border-gray-200 bg-gray-50 shadow-sm rounded-lg sm:rounded-3xl overflow-hidden;;
-  }
+.card {
+  @apply relative h-full border border-gray-200 bg-gray-50 shadow-sm rounded-lg sm:rounded-3xl overflow-hidden;;
+}
 
-  .card-body {
-    @apply pt-2 px-4 pb-12 sm:pt-6 sm:px-6;
-  }
+.card-body {
+  @apply pt-2 px-4 pb-12 sm:pt-6 sm:px-6;
+}
 
-  .card-img-top {
-    @apply object-cover w-full h-48;
-  }
+.card-img-top {
+  @apply object-cover w-full h-48;
+}
 
-  .card-header {
-    @apply inset-x-0 px-4 py-6 sm:py-4 sm:px-6 border-b bg-white border-gray-200;
-  }
+.card-header {
+  @apply inset-x-0 px-4 py-6 sm:py-4 sm:px-6 border-b bg-white border-gray-200;
+}
 
-  .card-footer {
-    @apply absolute bottom-0 inset-x-0 bg-white px-4 py-4 sm:px-6 border-t border-gray-200;
-  }
+.card-footer {
+  @apply absolute bottom-0 inset-x-0 bg-white px-4 py-4 sm:px-6 border-t border-gray-200;
+}
 
-  .kpi-tile-title-container {
-    @apply  uppercase mb-2 overflow-ellipsis overflow-hidden;
-  }
+.kpi-tile-title-container {
+  @apply  uppercase mb-2 overflow-ellipsis overflow-hidden;
+}
 
-  .kpi-tile-action {
-    @apply hover:text-gray-500;
-  }
+.kpi-tile-action {
+  @apply hover:text-gray-500;
+}
 
-  .kpi-tile-value {
-    @apply text-6xl font-thin my-6;
-  }
+.kpi-tile-value {
+  @apply text-6xl font-thin my-6;
+}
 
-  .gallery-deck-1 {
-    @apply grid grid-cols-1 p-4 gap-x-6 sm:grid-cols-2;
-  }
+.gallery-deck-1 {
+  @apply grid grid-cols-1 p-4 gap-x-6 sm:grid-cols-2;
+}
 
-  .gallery-deck-2 {
-    @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 sm:gap-x-6 p-4;
-  }
+.gallery-deck-2 {
+  @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 sm:gap-x-6 p-4;
+}
   
-  .gallery-deck-3 {
-    @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 p-4;
-  }
+.gallery-deck-3 {
+  @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 p-4;
+}
   
-  .gallery-deck-4 {
-    @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8 p-4;
-  }
+.gallery-deck-4 {
+  @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8 p-4;
+}
 
-  .tile-card-footer {
-    @apply absolute bottom-0 inset-x-0 bg-gradient-to-b from-transparent to-gray-50 px-2 pb-4 sm:px-4;
-  }
+.tile-card-footer {
+  @apply absolute bottom-0 inset-x-0 bg-gradient-to-b from-transparent to-gray-50 px-2 pb-4 sm:px-4;
+}
 
-  .tile-card-item-btn {
-    @apply inline-flex mx-1 items-center rounded-full border border-transparent p-1 text-white shadow-sm focus:outline-none;
-  }
+.tile-card-item-btn {
+  @apply inline-flex mx-1 items-center rounded-full border border-transparent p-1 text-white shadow-sm focus:outline-none;
+}
   
-  .tile-card-item-btn-selected {
-    @apply bg-slate-700 ring-slate-700 ring-1 ring-offset-1;
-  }
+.tile-card-item-btn-selected {
+  @apply bg-slate-700 ring-slate-700 ring-1 ring-offset-1;
+}
 
-  .tile-card-item-btn-available {
-    @apply bg-slate-500 hover:bg-slate-700 ring-0;
-  }
+.tile-card-item-btn-available {
+  @apply bg-slate-500 hover:bg-slate-700 ring-0;
+}
 

package/src/assets/styles/collapsible-panel.css

@@ -1,24 +1,23 @@
+.collapsible-panel-container {
+  @apply bg-white border border-gray-200 mb-2;
+}
 
-  .collapsible-panel-container {
-    @apply bg-white border border-gray-200 mb-2;
-  }
+.collapsible-panel-container-shadow {
+  @apply shadow-sm;
+}
 
-  .collapsible-panel-container-shadow {
-    @apply shadow-sm;
-  }
+.collapsible-panel-container-inner {
+  @apply relative border-b border-gray-200;
+}
 
-  .collapsible-panel-container-inner {
-    @apply relative border-b border-gray-200;
-  }
+.collapsible-panel-button {
+  @apply w-full px-8 py-6 text-left;
+}
 
-  .collapsible-panel-button {
-    @apply w-full px-8 py-6 text-left;
-  }
+.collapsible-panel-button-content-container {
+  @apply flex items-center justify-between;
+}
 
-  .collapsible-panel-button-content-container {
-    @apply flex items-center justify-between;
-  }
-
-  .collapsible-panel-content-container {
-    @apply relative overflow-hidden transition-all duration-700;
-  }
+.collapsible-panel-content-container {
+  @apply relative overflow-hidden transition-all duration-700;
+}

package/src/assets/styles/combobox.css

@@ -1,28 +1,27 @@
+.combobox-wrapper {
+    @apply relative mt-1;
+}
 
-    .combobox-wrapper {
-        @apply relative mt-1;
-    }
+.combobox-input {
+    @apply w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm;
+}
 
-    .combobox-input {
-        @apply w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm;
-    }
+.combobox-icons {
+    @apply absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none;
+}
 
-    .combobox-icons {
-        @apply absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none;
-    }
+.combobox-results {
+    @apply absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-black/5 focus:outline-none sm:text-sm;
+}
 
-    .combobox-results {
-        @apply absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-black/5 focus:outline-none sm:text-sm;
-    }
+.combobox-default-item-template {
+    @apply hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate;
+}
 
-    .combobox-default-item-template {
-        @apply hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate;
-    }
+.combobox-selected-item-wrapper {
+    @apply relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400;
+}
 
-    .combobox-selected-item-wrapper {
-        @apply relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400;
-    }
-
-    .combobox-selected-item-remove-btn {
-        @apply cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500;
-    }
+.combobox-selected-item-remove-btn {
+    @apply cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500;
+}

package/src/assets/styles/components.css

@@ -1,36 +1,34 @@
+.md-visible {
+  @apply hidden md:block;
+}
 
+.btn-outline {
+  @apply focus:outline-none bg-transparent text-gray-700 text-sm hover:text-gray-800 px-2.5 py-1.5 border border-gray-500 hover:border-gray-600 rounded-sm;
+}
 
-  .md-visible {
-    @apply hidden md:block;
-  }
+.btn-outline:disabled {
+  @apply focus:outline-none bg-transparent text-gray-400 text-sm px-2.5 py-1.5 border border-gray-300 rounded-sm cursor-not-allowed;
+}
 
-  .btn-outline {
-    @apply focus:outline-none bg-transparent text-gray-700 text-sm hover:text-gray-800 px-2.5 py-1.5 border border-gray-500 hover:border-gray-600 rounded-sm;
-  }
 
-  .btn-outline:disabled {
-    @apply focus:outline-none bg-transparent text-gray-400 text-sm px-2.5 py-1.5 border border-gray-300 rounded-sm cursor-not-allowed;
-  }
+.btn-view-header {
+  @apply text-base focus:outline-none inline-flex items-center justify-center h-8 text-white transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-800;
+}
 
 
-  .btn-view-header {
-    @apply text-base focus:outline-none inline-flex items-center justify-center h-8 text-white transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-800;
-  }
+.sidebar .btn-view-header {
+  @apply text-base focus:outline-none inline-flex items-center justify-center h-8 text-gray-900 transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-800 hover:text-white;
+}
 
+.btn-form-view-header {
+  @apply text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-gray-700 transition-colors duration-150 rounded-sm hover:shadow-sm hover:bg-gray-50;
+}
 
-  .sidebar .btn-view-header {
-    @apply text-base focus:outline-none inline-flex items-center justify-center h-8 text-gray-900 transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-800 hover:text-white;
-  }
+.btn-form-view-header-search {
+  @apply rounded-l-none text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-gray-700 transition-colors duration-150 rounded-sm hover:shadow-sm hover:bg-gray-50;
+}
 
-  .btn-form-view-header {
-    @apply text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-gray-700 transition-colors duration-150 rounded-sm hover:shadow-sm hover:bg-gray-50;
-  }
-
-  .btn-form-view-header-search {
-    @apply rounded-l-none text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-gray-700 transition-colors duration-150 rounded-sm hover:shadow-sm hover:bg-gray-50;
-  }
-
-  .selected-view-indicator {
-    @apply absolute top-0 right-0 block ml-2 h-1.5 w-1.5 rounded-full ring-1 ring-white bg-blue-300;
-  }
+.selected-view-indicator {
+  @apply absolute top-0 right-0 block ml-2 h-1.5 w-1.5 rounded-full ring-1 ring-white bg-blue-300;
+}
 

package/src/assets/styles/drop-down-menu.css

@@ -1,49 +1,48 @@
-
-  .dropdown-container {
-    @apply relative w-auto;
-  }
-
-  .dropdown-button {
-    @apply bg-white block w-full rounded-lg border pl-3 py-1.5 pr-10 ring-0 placeholder:text-gray-300 focus:border-gray-500 hover:border-gray-400
-    text-sm leading-6 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:border-gray-300;
-  }
-
-  .dropdown-selected-text {
-    @apply truncate w-full inline-flex items-start place-items-center;
-  }
-
-  .dropdown-button-icon {
-    @apply absolute inset-y-0 right-1 flex items-center pointer-events-none;
-  }
-
-  .dropdown-arrow {
-    @apply h-5 w-5 text-gray-600;
-  }
-
-  .dropdown-ul {
-    @apply absolute z-50 mt-1 w-auto bg-white shadow max-h-60 rounded-lg py-1 text-xs ring-1 ring-gray-300 ring-black/5 focus:outline-none overflow-x-hidden;
-  }
-
-  .dropdown-li {
-    @apply text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100 min-w-max;
-  }
-
-  .dropdown-li-selected {
-    @apply text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 min-w-max;
-  }
-
-  .dropdown-li-text {
-    @apply font-normal truncate inline-flex items-center ;
-  }
-
-  .dropdown-li-selected-text {
-    @apply font-semibold truncate inline-flex items-center ;
-  }
-
-  .dropdown-li-selected-indicator-container {
-    @apply text-gray-600 absolute inset-y-0 right-0 flex items-center pr-4;
-  }
-
-  .dropdown-li-selected-indicator {
-    @apply h-5 w-5;
-  }
+.dropdown-container {
+  @apply relative w-auto;
+}
+
+.dropdown-button {
+  @apply bg-white block w-full rounded-lg border pl-3 py-1.5 pr-10 ring-0 placeholder:text-gray-300 focus:border-gray-500 hover:border-gray-400
+  text-sm leading-6 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:border-gray-300;
+}
+
+.dropdown-selected-text {
+  @apply truncate w-full inline-flex items-start place-items-center;
+}
+
+.dropdown-button-icon {
+  @apply absolute inset-y-0 right-1 flex items-center pointer-events-none;
+}
+
+.dropdown-arrow {
+  @apply h-5 w-5 text-gray-600;
+}
+
+.dropdown-ul {
+  @apply absolute z-50 mt-1 w-auto bg-white shadow max-h-60 rounded-lg py-1 text-xs ring-1 ring-gray-300 ring-black/5 focus:outline-none overflow-x-hidden;
+}
+
+.dropdown-li {
+  @apply text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100 min-w-max;
+}
+
+.dropdown-li-selected {
+  @apply text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 min-w-max;
+}
+
+.dropdown-li-text {
+  @apply font-normal truncate inline-flex items-center ;
+}
+
+.dropdown-li-selected-text {
+  @apply font-semibold truncate inline-flex items-center ;
+}
+
+.dropdown-li-selected-indicator-container {
+  @apply text-gray-600 absolute inset-y-0 right-0 flex items-center pr-4;
+}
+
+.dropdown-li-selected-indicator {
+  @apply h-5 w-5;
+}

package/src/assets/styles/form-layout.css

@@ -1,52 +1,51 @@
+.form-layout-container {
+  @apply bg-white shadow-sm border border-gray-200 rounded-xl;
+}
 
-  .form-layout-container {
-    @apply bg-white shadow-sm border border-gray-200 rounded-xl;
-  }
+.form-header {
+  @apply px-4 py-4 bg-gray-50 rounded-t-xl h-24 sm:flex sm:items-center sm:justify-between;
+}
 
-  .form-header {
-    @apply px-4 py-4 bg-gray-50 rounded-t-xl h-24 sm:flex sm:items-center sm:justify-between;
-  }
+.form-header-inner {
+  @apply flex-1 min-w-0;
+}
 
-  .form-header-inner {
-    @apply flex-1 min-w-0;
-  }
+.form-header-image {
+  @apply w-12 h-12;
+}
 
-  .form-header-image {
-    @apply w-12 h-12;
-  }
+.form-title {
+  @apply text-lg leading-6 font-medium text-gray-900;
+}
 
-  .form-title {
-    @apply text-lg leading-6 font-medium text-gray-900;
-  }
+.form-subtitle {
+  @apply mt-1 max-w-2xl text-sm text-gray-500;
+}
 
-  .form-subtitle {
-    @apply mt-1 max-w-2xl text-sm text-gray-500;
-  }
+.form-header-actions {
+  @apply mt-4 flex md:mt-0 md:ml-4;
+}
 
-  .form-header-actions {
-    @apply mt-4 flex md:mt-0 md:ml-4;
-  }
+.form-content-container {
+  @apply px-4 py-4;
+}
 
-  .form-content-container {
-    @apply px-4 py-4;
-  }
+.form-content-container-inner {
+  @apply flex flex-col pt-4;
+}
 
-  .form-content-container-inner {
-    @apply flex flex-col pt-4;
-  }
+.form-header-search-input {
+  @apply block w-60 bg-gray-50 rounded-md text-sm text-gray-900 placeholder-gray-500 outline-none;
+}
 
-  .form-header-search-input {
-    @apply block w-60 bg-gray-50 rounded-md text-sm text-gray-900 placeholder-gray-500 outline-none;
-  }
+.field-label {
+  @apply block text-sm py-2 font-medium text-gray-500;
+}
 
-  .field-label {
-    @apply block text-sm py-2 font-medium text-gray-500;
-  }
+.field-info {
+  @apply mt-2 text-xs text-gray-400 py-2;
+}
 
-  .field-info {
-    @apply mt-2 text-xs text-gray-400 py-2;
-  }
-
-  .form-actions {
-    @apply -mx-4 -mb-4 mt-4 px-4 sm:px-6 py-3 bg-gray-100 text-gray-700 text-right flex justify-end rounded-b-xl;
-  }
+.form-actions {
+  @apply -mx-4 -mb-4 mt-4 px-4 sm:px-6 py-3 bg-gray-100 text-gray-700 text-right flex justify-end rounded-b-xl;
+}