@imaginario27/air-ui-ds 1.0.17 → 1.0.18

package/assets/css/main.css

@@ -1,238 +1,238 @@
-@import "tailwindcss";
-@import "./theme/primitives.css";
-@import "./theme/colors.css";
-@import "./theme/ui-theme.css";
-@import "./defaults.css";
-
-@theme {
-    /* Disables Tailwind default colors */
-    /* --color-*: initial; */
-
-    --color-background-container-surface: var(--color-background-container-surface);
-    --color-background-overlay: var(--color-background-overlay);
-    --color-background-surface: var(--color-background-surface);
-    --color-background-danger-bold: var(--color-background-danger-bold);
-    --color-background-danger-subtler: var(--color-background-danger-subtler);
-    --color-background-danger-subtlest: var(--color-background-danger-subtlest);
-    --color-background-delete-default: var(--color-background-delete-default);
-    --color-background-delete-hover: var(--color-background-delete-hover);
-    --color-background-delete-on-neutral-hover: var(--color-background-delete-on-neutral-hover);
-    --color-background-delete-soft: var(--color-background-delete-soft);
-    --color-background-delete-soft-hover: var(--color-background-delete-soft-hover);
-    --color-background-info-bold: var(--color-background-info-bold);
-    --color-background-info-subtler: var(--color-background-info-subtler);
-    --color-background-info-subtlest: var(--color-background-info-subtlest);
-    --color-background-neutral-active: var(--color-background-neutral-active);
-    --color-background-neutral-bold: var(--color-background-neutral-bold);
-    --color-background-neutral-default: var(--color-background-neutral-default);
-    --color-background-neutral-disabled: var(--color-background-neutral-disabled);
-    --color-background-neutral-filled-transparent: var(--color-background-neutral-filled-transparent);
-    --color-background-neutral-hover: var(--color-background-neutral-hover);
-    --color-background-neutral-hover-subtle: var(--color-background-neutral-hover-subtle);
-    --color-background-neutral-sublter: var(--color-background-neutral-sublter);
-    --color-background-neutral-subtle: var(--color-background-neutral-subtle);
-    --color-background-neutral-subtlest: var(--color-background-neutral-subtlest);
-    --color-background-neutral-subtlest-on-container-surface: var(--color-background-neutral-subtlest-on-container-surface);
-    --color-background-neutral-filled-default: var(--color-background-neutral-filled-default);
-    --color-background-neutral-filled-hover: var(--color-background-neutral-filled-hover);
-    --color-background-primary-brand-active: var(--color-background-primary-brand-active);
-    --color-background-primary-brand-checked: var(--color-background-primary-brand-checked);
-    --color-background-primary-brand-checked-subtlest: var(--color-background-primary-brand-checked-subtlest);
-    --color-background-primary-brand-default: var(--color-background-primary-brand-default);
-    --color-background-primary-brand-hover: var(--color-background-primary-brand-hover);
-    --color-background-primary-brand-on-checked-subtle-bg: var(--color-background-primary-brand-on-checked-subtle-bg);
-    --color-background-primary-brand-soft: var(--color-background-primary-brand-soft);
-    --color-background-primary-brand-soft-hover: var(--color-background-primary-brand-soft-hover);
-    --color-background-primary-brand-subtle-active: var(--color-background-primary-brand-subtle-active);
-    --color-background-secondary-brand-checked: var(--color-background-secondary-brand-checked);
-    --color-background-secondary-brand-checked-subtlest: var(--color-background-secondary-brand-checked-subtlest);
-    --color-background-secondary-brand-default: var(--color-background-secondary-brand-default);
-    --color-background-secondary-brand-hover: var(--color-background-secondary-brand-hover);
-    --color-background-secondary-brand-on-checked-subtle-bg: var(--color-background-secondary-brand-on-checked-subtle-bg);
-    --color-background-secondary-brand-soft: var(--color-background-secondary-brand-soft);
-    --color-background-success-bold: var(--color-background-success-bold);
-    --color-background-success-subtler: var(--color-background-success-subtler);
-    --color-background-success-subtlest: var(--color-background-success-subtlest);
-    --color-background-warning-bold: var(--color-background-warning-bold);
-    --color-background-warning-subtler: var(--color-background-warning-subtler);
-    --color-background-warning-subtlest: var(--color-background-warning-subtlest);
-    --color-border-danger: var(--color-border-danger);
-    --color-border-default: var(--color-border-default);
-    --color-border-error: var(--color-border-error);
-    --color-border-inactive: var(--color-border-inactive);
-    --color-border-info: var(--color-border-info);
-    --color-border-secondary-brand: var(--color-border-secondary-brand);
-    --color-border-success: var(--color-border-success);
-    --color-border-warning: var(--color-border-warning);
-    --color-border-delete-default: var(--color-border-delete-default);
-    --color-border-delete-subtle: var(--color-border-delete-subtle);
-    --color-border-neutral-disabled: var(--color-border-neutral-disabled);
-    --color-border-neutral-hover: var(--color-border-neutral-hover);
-    --color-border-neutral-on-filled: var(--color-border-neutral-on-filled);
-    --color-border-neutral-stacked: var(--color-border-neutral-stacked);
-    --color-border-neutral-subtle: var(--color-border-neutral-subtle);
-    --color-border-primary-brand-active: var(--color-border-primary-brand-active);
-    --color-border-primary-brand-default: var(--color-border-primary-brand-default);
-    --color-border-primary-brand-hover: var(--color-border-primary-brand-hover);
-    --color-chart-variant-five: var(--color-chart-variant-five);
-    --color-chart-variant-four: var(--color-chart-variant-four);
-    --color-chart-variant-one: var(--color-chart-variant-one);
-    --color-chart-variant-six: var(--color-chart-variant-six);
-    --color-chart-variant-three: var(--color-chart-variant-three);
-    --color-chart-variant-two: var(--color-chart-variant-two);
-    --color-icon-danger: var(--color-icon-danger);
-    --color-icon-danger-subtle: var(--color-icon-danger-subtle);
-    --color-icon-default: var(--color-icon-default);
-    --color-icon-delete: var(--color-icon-delete);
-    --color-icon-error: var(--color-icon-error);
-    --color-icon-info: var(--color-icon-info);
-    --color-icon-info-subtle-strong: var(--color-icon-info-subtle-strong);
-    --color-icon-rating: var(--color-icon-rating);
-    --color-icon-success: var(--color-icon-success);
-    --color-icon-success-subtle: var(--color-icon-success-subtle);
-    --color-icon-warning: var(--color-icon-warning);
-    --color-icon-warning-on-bg: var(--color-icon-warning-on-bg);
-    --color-icon-warning-subtle: var(--color-icon-warning-subtle);
-    --color-icon-neutral-disabled: var(--color-icon-neutral-disabled);
-    --color-icon-neutral-inactive: var(--color-icon-neutral-inactive);
-    --color-icon-neutral-on-filled-bg: var(--color-icon-neutral-on-filled-bg);
-    --color-icon-neutral-on-filled-secondary-brand-bg: var(--color-icon-neutral-on-filled-secondary-brand-bg);
-    --color-icon-neutral-on-monochrome-active-bg: var(--color-icon-neutral-on-monochrome-active-bg);
-    --color-icon-neutral-on-monochrome-hover-bg: var(--color-icon-neutral-on-monochrome-hover-bg);
-    --color-icon-neutral-on-neutral-bg: var(--color-icon-neutral-on-neutral-bg);
-    --color-icon-neutral-on-primary-brand-soft-bg: var(--color-icon-neutral-on-primary-brand-soft-bg);
-    --color-icon-neutral-on-subtlest-bg: var(--color-icon-neutral-on-subtlest-bg);
-    --color-icon-neutral-subtle: var(--color-icon-neutral-subtle);
-    --color-icon-neutral-subtle-on-subtler-bg: var(--color-icon-neutral-subtle-on-subtler-bg);
-    --color-icon-neutral-subtler: var(--color-icon-neutral-subtler);
-    --color-icon-neutral-subtlest: var(--color-icon-neutral-subtlest);
-    --color-icon-primary-brand-active: var(--color-icon-primary-brand-active);
-    --color-icon-primary-brand-default: var(--color-icon-primary-brand-default);
-    --color-icon-primary-brand-hover: var(--color-icon-primary-brand-hover);
-    --color-icon-primary-brand-on-neutral-hover-bg: var(--color-icon-primary-brand-on-neutral-hover-bg);
-    --color-icon-primary-brand-on-soft-bg: var(--color-icon-primary-brand-on-soft-bg);
-    --color-icon-primary-brand-rating: var(--color-icon-primary-brand-rating);
-    --color-icon-secondary-brand-active: var(--color-icon-secondary-brand-active);
-    --color-icon-secondary-brand-default: var(--color-icon-secondary-brand-default);
-    --color-text-danger: var(--color-text-danger);
-    --color-text-default: var(--color-text-default);
-    --color-text-delete: var(--color-text-delete);
-    --color-text-error: var(--color-text-error);
-    --color-text-info: var(--color-text-info);
-    --color-text-success: var(--color-text-success);
-    --color-text-warning: var(--color-text-warning);
-    --color-text-warning-on-bg: var(--color-text-warning-on-bg);
-    --color-text-neutral-disabled: var(--color-text-neutral-disabled);
-    --color-text-neutral-inactive: var(--color-text-neutral-inactive);
-    --color-text-neutral-on-filled: var(--color-text-neutral-on-filled);
-    --color-text-neutral-on-monochrome-active-bg: var(--color-text-neutral-on-monochrome-active-bg);
-    --color-text-neutral-on-monochrome-hover-bg: var(--color-text-neutral-on-monochrome-hover-bg);
-    --color-text-neutral-on-neutral-bg: var(--color-text-neutral-on-neutral-bg);
-    --color-text-neutral-on-neutral-filled-bg: var(--color-text-neutral-on-neutral-filled-bg);
-    --color-text-neutral-on-primary-brand-soft-bg: var(--color-text-neutral-on-primary-brand-soft-bg);
-    --color-text-neutral-subtle: var(--color-text-neutral-subtle);
-    --color-text-neutral-subtle-on-disabled-bg: var(--color-text-neutral-subtle-on-disabled-bg);
-    --color-text-neutral-subtle-on-subtler-bg: var(--color-text-neutral-subtle-on-subtler-bg);
-    --color-text-neutral-subtler: var(--color-text-neutral-subtler);
-    --color-text-neutral-subtlest: var(--color-text-neutral-subtlest);
-    --color-text-primary-brand-active: var(--color-text-primary-brand-active);
-    --color-text-primary-brand-default: var(--color-text-primary-brand-default);
-    --color-text-primary-brand-hover: var(--color-text-primary-brand-hover);
-    --color-text-primary-brand-on-checked-subtlest: var(--color-text-primary-brand-on-checked-subtlest);
-    --color-text-primary-brand-on-neutral-hover-bg: var(--color-text-primary-brand-on-neutral-hover-bg);
-    --color-text-primary-brand-on-soft-bg: var(--color-text-primary-brand-on-soft-bg);
-    --color-text-secondary-brand-default: var(--color-text-secondary-brand-default);
-    --color-text-secondary-brand-on-checked-subtlest: var(--color-text-secondary-brand-on-checked-subtlest);
-    --color-text-secondary-brand-on-soft-bg: var(--color-text-secondary-brand-on-soft-bg);
-    --color-theme-danger-100: var(--color-theme-danger-100);
-    --color-theme-danger-200: var(--color-theme-danger-200);
-    --color-theme-danger-300: var(--color-theme-danger-300);
-    --color-theme-danger-400: var(--color-theme-danger-400);
-    --color-theme-danger-50: var(--color-theme-danger-50);
-    --color-theme-danger-500: var(--color-theme-danger-500);
-    --color-theme-danger-600: var(--color-theme-danger-600);
-    --color-theme-danger-700: var(--color-theme-danger-700);
-    --color-theme-danger-800: var(--color-theme-danger-800);
-    --color-theme-danger-900: var(--color-theme-danger-900);
-    --color-theme-danger-950: var(--color-theme-danger-950);
-    --color-theme-info-100: var(--color-theme-info-100);
-    --color-theme-info-200: var(--color-theme-info-200);
-    --color-theme-info-300: var(--color-theme-info-300);
-    --color-theme-info-400: var(--color-theme-info-400);
-    --color-theme-info-50: var(--color-theme-info-50);
-    --color-theme-info-500: var(--color-theme-info-500);
-    --color-theme-info-600: var(--color-theme-info-600);
-    --color-theme-info-700: var(--color-theme-info-700);
-    --color-theme-info-800: var(--color-theme-info-800);
-    --color-theme-info-900: var(--color-theme-info-900);
-    --color-theme-info-950: var(--color-theme-info-950);
-    --color-theme-neutral-100: var(--color-theme-neutral-100);
-    --color-theme-neutral-200: var(--color-theme-neutral-200);
-    --color-theme-neutral-300: var(--color-theme-neutral-300);
-    --color-theme-neutral-400: var(--color-theme-neutral-400);
-    --color-theme-neutral-50: var(--color-theme-neutral-50);
-    --color-theme-neutral-500: var(--color-theme-neutral-500);
-    --color-theme-neutral-600: var(--color-theme-neutral-600);
-    --color-theme-neutral-700: var(--color-theme-neutral-700);
-    --color-theme-neutral-800: var(--color-theme-neutral-800);
-    --color-theme-neutral-900: var(--color-theme-neutral-900);
-    --color-theme-neutral-950: var(--color-theme-neutral-950);
-    --color-theme-neutral-black: var(--color-theme-neutral-black);
-    --color-theme-neutral-white: var(--color-theme-neutral-white);
-    --color-theme-primary-brand-100: var(--color-theme-primary-brand-100);
-    --color-theme-primary-brand-200: var(--color-theme-primary-brand-200);
-    --color-theme-primary-brand-300: var(--color-theme-primary-brand-300);
-    --color-theme-primary-brand-400: var(--color-theme-primary-brand-400);
-    --color-theme-primary-brand-50: var(--color-theme-primary-brand-50);
-    --color-theme-primary-brand-500: var(--color-theme-primary-brand-500);
-    --color-theme-primary-brand-600: var(--color-theme-primary-brand-600);
-    --color-theme-primary-brand-700: var(--color-theme-primary-brand-700);
-    --color-theme-primary-brand-800: var(--color-theme-primary-brand-800);
-    --color-theme-primary-brand-900: var(--color-theme-primary-brand-900);
-    --color-theme-primary-brand-950: var(--color-theme-primary-brand-950);
-    --color-theme-secondary-brand-100: var(--color-theme-secondary-brand-100);
-    --color-theme-secondary-brand-200: var(--color-theme-secondary-brand-200);
-    --color-theme-secondary-brand-300: var(--color-theme-secondary-brand-300);
-    --color-theme-secondary-brand-400: var(--color-theme-secondary-brand-400);
-    --color-theme-secondary-brand-50: var(--color-theme-secondary-brand-50);
-    --color-theme-secondary-brand-500: var(--color-theme-secondary-brand-500);
-    --color-theme-secondary-brand-600: var(--color-theme-secondary-brand-600);
-    --color-theme-secondary-brand-700: var(--color-theme-secondary-brand-700);
-    --color-theme-secondary-brand-800: var(--color-theme-secondary-brand-800);
-    --color-theme-secondary-brand-900: var(--color-theme-secondary-brand-900);
-    --color-theme-secondary-brand-950: var(--color-theme-secondary-brand-950);
-    --color-theme-success-100: var(--color-theme-success-100);
-    --color-theme-success-200: var(--color-theme-success-200);
-    --color-theme-success-300: var(--color-theme-success-300);
-    --color-theme-success-400: var(--color-theme-success-400);
-    --color-theme-success-50: var(--color-theme-success-50);
-    --color-theme-success-500: var(--color-theme-success-500);
-    --color-theme-success-600: var(--color-theme-success-600);
-    --color-theme-success-700: var(--color-theme-success-700);
-    --color-theme-success-800: var(--color-theme-success-800);
-    --color-theme-success-900: var(--color-theme-success-900);
-    --color-theme-success-950: var(--color-theme-success-950);
-    --color-theme-warning-100: var(--color-theme-warning-100);
-    --color-theme-warning-200: var(--color-theme-warning-200);
-    --color-theme-warning-300: var(--color-theme-warning-300);
-    --color-theme-warning-400: var(--color-theme-warning-400);
-    --color-theme-warning-50: var(--color-theme-warning-50);
-    --color-theme-warning-500: var(--color-theme-warning-500);
-    --color-theme-warning-600: var(--color-theme-warning-600);
-    --color-theme-warning-700: var(--color-theme-warning-700);
-    --color-theme-warning-800: var(--color-theme-warning-800);
-    --color-theme-warning-900: var(--color-theme-warning-900);
-    --color-theme-warning-950: var(--color-theme-warning-950);
-
-    --opacity-disabled: var(--opacity-disabled);
-    --radius-button: var(--radius-button);
-    --spacing-column-gap: var(--spacing-column-gap);
-    --spacing-content-body-bottom-padding: var(--spacing-content-body-bottom-padding);
-    --spacing-content-side-padding: var(--spacing-content-side-padding);
-    --spacing-content-side-padding-mobile: var(--spacing-content-side-padding-mobile);
-    --spacing-section-xs: var(--spacing-section-xs);
-    --spacing-section-sm: var(--spacing-section-sm);
-    --spacing-section-md: var(--spacing-section-md);
-    --spacing-section-lg: var(--spacing-section-lg);
-    --spacing-section-xl: var(--spacing-section-xl);
+@import "tailwindcss";
+@import "./theme/primitives.css";
+@import "./theme/colors.css";
+@import "./theme/ui-theme.css";
+@import "./defaults.css";
+
+@theme {
+    /* Disables Tailwind default colors */
+    /* --color-*: initial; */
+
+    --color-background-container-surface: var(--color-background-container-surface);
+    --color-background-overlay: var(--color-background-overlay);
+    --color-background-surface: var(--color-background-surface);
+    --color-background-danger-bold: var(--color-background-danger-bold);
+    --color-background-danger-subtler: var(--color-background-danger-subtler);
+    --color-background-danger-subtlest: var(--color-background-danger-subtlest);
+    --color-background-delete-default: var(--color-background-delete-default);
+    --color-background-delete-hover: var(--color-background-delete-hover);
+    --color-background-delete-on-neutral-hover: var(--color-background-delete-on-neutral-hover);
+    --color-background-delete-soft: var(--color-background-delete-soft);
+    --color-background-delete-soft-hover: var(--color-background-delete-soft-hover);
+    --color-background-info-bold: var(--color-background-info-bold);
+    --color-background-info-subtler: var(--color-background-info-subtler);
+    --color-background-info-subtlest: var(--color-background-info-subtlest);
+    --color-background-neutral-active: var(--color-background-neutral-active);
+    --color-background-neutral-bold: var(--color-background-neutral-bold);
+    --color-background-neutral-default: var(--color-background-neutral-default);
+    --color-background-neutral-disabled: var(--color-background-neutral-disabled);
+    --color-background-neutral-filled-transparent: var(--color-background-neutral-filled-transparent);
+    --color-background-neutral-hover: var(--color-background-neutral-hover);
+    --color-background-neutral-hover-subtle: var(--color-background-neutral-hover-subtle);
+    --color-background-neutral-sublter: var(--color-background-neutral-sublter);
+    --color-background-neutral-subtle: var(--color-background-neutral-subtle);
+    --color-background-neutral-subtlest: var(--color-background-neutral-subtlest);
+    --color-background-neutral-subtlest-on-container-surface: var(--color-background-neutral-subtlest-on-container-surface);
+    --color-background-neutral-filled-default: var(--color-background-neutral-filled-default);
+    --color-background-neutral-filled-hover: var(--color-background-neutral-filled-hover);
+    --color-background-primary-brand-active: var(--color-background-primary-brand-active);
+    --color-background-primary-brand-checked: var(--color-background-primary-brand-checked);
+    --color-background-primary-brand-checked-subtlest: var(--color-background-primary-brand-checked-subtlest);
+    --color-background-primary-brand-default: var(--color-background-primary-brand-default);
+    --color-background-primary-brand-hover: var(--color-background-primary-brand-hover);
+    --color-background-primary-brand-on-checked-subtle-bg: var(--color-background-primary-brand-on-checked-subtle-bg);
+    --color-background-primary-brand-soft: var(--color-background-primary-brand-soft);
+    --color-background-primary-brand-soft-hover: var(--color-background-primary-brand-soft-hover);
+    --color-background-primary-brand-subtle-active: var(--color-background-primary-brand-subtle-active);
+    --color-background-secondary-brand-checked: var(--color-background-secondary-brand-checked);
+    --color-background-secondary-brand-checked-subtlest: var(--color-background-secondary-brand-checked-subtlest);
+    --color-background-secondary-brand-default: var(--color-background-secondary-brand-default);
+    --color-background-secondary-brand-hover: var(--color-background-secondary-brand-hover);
+    --color-background-secondary-brand-on-checked-subtle-bg: var(--color-background-secondary-brand-on-checked-subtle-bg);
+    --color-background-secondary-brand-soft: var(--color-background-secondary-brand-soft);
+    --color-background-success-bold: var(--color-background-success-bold);
+    --color-background-success-subtler: var(--color-background-success-subtler);
+    --color-background-success-subtlest: var(--color-background-success-subtlest);
+    --color-background-warning-bold: var(--color-background-warning-bold);
+    --color-background-warning-subtler: var(--color-background-warning-subtler);
+    --color-background-warning-subtlest: var(--color-background-warning-subtlest);
+    --color-border-danger: var(--color-border-danger);
+    --color-border-default: var(--color-border-default);
+    --color-border-error: var(--color-border-error);
+    --color-border-inactive: var(--color-border-inactive);
+    --color-border-info: var(--color-border-info);
+    --color-border-secondary-brand: var(--color-border-secondary-brand);
+    --color-border-success: var(--color-border-success);
+    --color-border-warning: var(--color-border-warning);
+    --color-border-delete-default: var(--color-border-delete-default);
+    --color-border-delete-subtle: var(--color-border-delete-subtle);
+    --color-border-neutral-disabled: var(--color-border-neutral-disabled);
+    --color-border-neutral-hover: var(--color-border-neutral-hover);
+    --color-border-neutral-on-filled: var(--color-border-neutral-on-filled);
+    --color-border-neutral-stacked: var(--color-border-neutral-stacked);
+    --color-border-neutral-subtle: var(--color-border-neutral-subtle);
+    --color-border-primary-brand-active: var(--color-border-primary-brand-active);
+    --color-border-primary-brand-default: var(--color-border-primary-brand-default);
+    --color-border-primary-brand-hover: var(--color-border-primary-brand-hover);
+    --color-chart-variant-five: var(--color-chart-variant-five);
+    --color-chart-variant-four: var(--color-chart-variant-four);
+    --color-chart-variant-one: var(--color-chart-variant-one);
+    --color-chart-variant-six: var(--color-chart-variant-six);
+    --color-chart-variant-three: var(--color-chart-variant-three);
+    --color-chart-variant-two: var(--color-chart-variant-two);
+    --color-icon-danger: var(--color-icon-danger);
+    --color-icon-danger-subtle: var(--color-icon-danger-subtle);
+    --color-icon-default: var(--color-icon-default);
+    --color-icon-delete: var(--color-icon-delete);
+    --color-icon-error: var(--color-icon-error);
+    --color-icon-info: var(--color-icon-info);
+    --color-icon-info-subtle-strong: var(--color-icon-info-subtle-strong);
+    --color-icon-rating: var(--color-icon-rating);
+    --color-icon-success: var(--color-icon-success);
+    --color-icon-success-subtle: var(--color-icon-success-subtle);
+    --color-icon-warning: var(--color-icon-warning);
+    --color-icon-warning-on-bg: var(--color-icon-warning-on-bg);
+    --color-icon-warning-subtle: var(--color-icon-warning-subtle);
+    --color-icon-neutral-disabled: var(--color-icon-neutral-disabled);
+    --color-icon-neutral-inactive: var(--color-icon-neutral-inactive);
+    --color-icon-neutral-on-filled-bg: var(--color-icon-neutral-on-filled-bg);
+    --color-icon-neutral-on-filled-secondary-brand-bg: var(--color-icon-neutral-on-filled-secondary-brand-bg);
+    --color-icon-neutral-on-monochrome-active-bg: var(--color-icon-neutral-on-monochrome-active-bg);
+    --color-icon-neutral-on-monochrome-hover-bg: var(--color-icon-neutral-on-monochrome-hover-bg);
+    --color-icon-neutral-on-neutral-bg: var(--color-icon-neutral-on-neutral-bg);
+    --color-icon-neutral-on-primary-brand-soft-bg: var(--color-icon-neutral-on-primary-brand-soft-bg);
+    --color-icon-neutral-on-subtlest-bg: var(--color-icon-neutral-on-subtlest-bg);
+    --color-icon-neutral-subtle: var(--color-icon-neutral-subtle);
+    --color-icon-neutral-subtle-on-subtler-bg: var(--color-icon-neutral-subtle-on-subtler-bg);
+    --color-icon-neutral-subtler: var(--color-icon-neutral-subtler);
+    --color-icon-neutral-subtlest: var(--color-icon-neutral-subtlest);
+    --color-icon-primary-brand-active: var(--color-icon-primary-brand-active);
+    --color-icon-primary-brand-default: var(--color-icon-primary-brand-default);
+    --color-icon-primary-brand-hover: var(--color-icon-primary-brand-hover);
+    --color-icon-primary-brand-on-neutral-hover-bg: var(--color-icon-primary-brand-on-neutral-hover-bg);
+    --color-icon-primary-brand-on-soft-bg: var(--color-icon-primary-brand-on-soft-bg);
+    --color-icon-primary-brand-rating: var(--color-icon-primary-brand-rating);
+    --color-icon-secondary-brand-active: var(--color-icon-secondary-brand-active);
+    --color-icon-secondary-brand-default: var(--color-icon-secondary-brand-default);
+    --color-text-danger: var(--color-text-danger);
+    --color-text-default: var(--color-text-default);
+    --color-text-delete: var(--color-text-delete);
+    --color-text-error: var(--color-text-error);
+    --color-text-info: var(--color-text-info);
+    --color-text-success: var(--color-text-success);
+    --color-text-warning: var(--color-text-warning);
+    --color-text-warning-on-bg: var(--color-text-warning-on-bg);
+    --color-text-neutral-disabled: var(--color-text-neutral-disabled);
+    --color-text-neutral-inactive: var(--color-text-neutral-inactive);
+    --color-text-neutral-on-filled: var(--color-text-neutral-on-filled);
+    --color-text-neutral-on-monochrome-active-bg: var(--color-text-neutral-on-monochrome-active-bg);
+    --color-text-neutral-on-monochrome-hover-bg: var(--color-text-neutral-on-monochrome-hover-bg);
+    --color-text-neutral-on-neutral-bg: var(--color-text-neutral-on-neutral-bg);
+    --color-text-neutral-on-neutral-filled-bg: var(--color-text-neutral-on-neutral-filled-bg);
+    --color-text-neutral-on-primary-brand-soft-bg: var(--color-text-neutral-on-primary-brand-soft-bg);
+    --color-text-neutral-subtle: var(--color-text-neutral-subtle);
+    --color-text-neutral-subtle-on-disabled-bg: var(--color-text-neutral-subtle-on-disabled-bg);
+    --color-text-neutral-subtle-on-subtler-bg: var(--color-text-neutral-subtle-on-subtler-bg);
+    --color-text-neutral-subtler: var(--color-text-neutral-subtler);
+    --color-text-neutral-subtlest: var(--color-text-neutral-subtlest);
+    --color-text-primary-brand-active: var(--color-text-primary-brand-active);
+    --color-text-primary-brand-default: var(--color-text-primary-brand-default);
+    --color-text-primary-brand-hover: var(--color-text-primary-brand-hover);
+    --color-text-primary-brand-on-checked-subtlest: var(--color-text-primary-brand-on-checked-subtlest);
+    --color-text-primary-brand-on-neutral-hover-bg: var(--color-text-primary-brand-on-neutral-hover-bg);
+    --color-text-primary-brand-on-soft-bg: var(--color-text-primary-brand-on-soft-bg);
+    --color-text-secondary-brand-default: var(--color-text-secondary-brand-default);
+    --color-text-secondary-brand-on-checked-subtlest: var(--color-text-secondary-brand-on-checked-subtlest);
+    --color-text-secondary-brand-on-soft-bg: var(--color-text-secondary-brand-on-soft-bg);
+    --color-theme-danger-100: var(--color-theme-danger-100);
+    --color-theme-danger-200: var(--color-theme-danger-200);
+    --color-theme-danger-300: var(--color-theme-danger-300);
+    --color-theme-danger-400: var(--color-theme-danger-400);
+    --color-theme-danger-50: var(--color-theme-danger-50);
+    --color-theme-danger-500: var(--color-theme-danger-500);
+    --color-theme-danger-600: var(--color-theme-danger-600);
+    --color-theme-danger-700: var(--color-theme-danger-700);
+    --color-theme-danger-800: var(--color-theme-danger-800);
+    --color-theme-danger-900: var(--color-theme-danger-900);
+    --color-theme-danger-950: var(--color-theme-danger-950);
+    --color-theme-info-100: var(--color-theme-info-100);
+    --color-theme-info-200: var(--color-theme-info-200);
+    --color-theme-info-300: var(--color-theme-info-300);
+    --color-theme-info-400: var(--color-theme-info-400);
+    --color-theme-info-50: var(--color-theme-info-50);
+    --color-theme-info-500: var(--color-theme-info-500);
+    --color-theme-info-600: var(--color-theme-info-600);
+    --color-theme-info-700: var(--color-theme-info-700);
+    --color-theme-info-800: var(--color-theme-info-800);
+    --color-theme-info-900: var(--color-theme-info-900);
+    --color-theme-info-950: var(--color-theme-info-950);
+    --color-theme-neutral-100: var(--color-theme-neutral-100);
+    --color-theme-neutral-200: var(--color-theme-neutral-200);
+    --color-theme-neutral-300: var(--color-theme-neutral-300);
+    --color-theme-neutral-400: var(--color-theme-neutral-400);
+    --color-theme-neutral-50: var(--color-theme-neutral-50);
+    --color-theme-neutral-500: var(--color-theme-neutral-500);
+    --color-theme-neutral-600: var(--color-theme-neutral-600);
+    --color-theme-neutral-700: var(--color-theme-neutral-700);
+    --color-theme-neutral-800: var(--color-theme-neutral-800);
+    --color-theme-neutral-900: var(--color-theme-neutral-900);
+    --color-theme-neutral-950: var(--color-theme-neutral-950);
+    --color-theme-neutral-black: var(--color-theme-neutral-black);
+    --color-theme-neutral-white: var(--color-theme-neutral-white);
+    --color-theme-primary-brand-100: var(--color-theme-primary-brand-100);
+    --color-theme-primary-brand-200: var(--color-theme-primary-brand-200);
+    --color-theme-primary-brand-300: var(--color-theme-primary-brand-300);
+    --color-theme-primary-brand-400: var(--color-theme-primary-brand-400);
+    --color-theme-primary-brand-50: var(--color-theme-primary-brand-50);
+    --color-theme-primary-brand-500: var(--color-theme-primary-brand-500);
+    --color-theme-primary-brand-600: var(--color-theme-primary-brand-600);
+    --color-theme-primary-brand-700: var(--color-theme-primary-brand-700);
+    --color-theme-primary-brand-800: var(--color-theme-primary-brand-800);
+    --color-theme-primary-brand-900: var(--color-theme-primary-brand-900);
+    --color-theme-primary-brand-950: var(--color-theme-primary-brand-950);
+    --color-theme-secondary-brand-100: var(--color-theme-secondary-brand-100);
+    --color-theme-secondary-brand-200: var(--color-theme-secondary-brand-200);
+    --color-theme-secondary-brand-300: var(--color-theme-secondary-brand-300);
+    --color-theme-secondary-brand-400: var(--color-theme-secondary-brand-400);
+    --color-theme-secondary-brand-50: var(--color-theme-secondary-brand-50);
+    --color-theme-secondary-brand-500: var(--color-theme-secondary-brand-500);
+    --color-theme-secondary-brand-600: var(--color-theme-secondary-brand-600);
+    --color-theme-secondary-brand-700: var(--color-theme-secondary-brand-700);
+    --color-theme-secondary-brand-800: var(--color-theme-secondary-brand-800);
+    --color-theme-secondary-brand-900: var(--color-theme-secondary-brand-900);
+    --color-theme-secondary-brand-950: var(--color-theme-secondary-brand-950);
+    --color-theme-success-100: var(--color-theme-success-100);
+    --color-theme-success-200: var(--color-theme-success-200);
+    --color-theme-success-300: var(--color-theme-success-300);
+    --color-theme-success-400: var(--color-theme-success-400);
+    --color-theme-success-50: var(--color-theme-success-50);
+    --color-theme-success-500: var(--color-theme-success-500);
+    --color-theme-success-600: var(--color-theme-success-600);
+    --color-theme-success-700: var(--color-theme-success-700);
+    --color-theme-success-800: var(--color-theme-success-800);
+    --color-theme-success-900: var(--color-theme-success-900);
+    --color-theme-success-950: var(--color-theme-success-950);
+    --color-theme-warning-100: var(--color-theme-warning-100);
+    --color-theme-warning-200: var(--color-theme-warning-200);
+    --color-theme-warning-300: var(--color-theme-warning-300);
+    --color-theme-warning-400: var(--color-theme-warning-400);
+    --color-theme-warning-50: var(--color-theme-warning-50);
+    --color-theme-warning-500: var(--color-theme-warning-500);
+    --color-theme-warning-600: var(--color-theme-warning-600);
+    --color-theme-warning-700: var(--color-theme-warning-700);
+    --color-theme-warning-800: var(--color-theme-warning-800);
+    --color-theme-warning-900: var(--color-theme-warning-900);
+    --color-theme-warning-950: var(--color-theme-warning-950);
+
+    --opacity-disabled: var(--opacity-disabled);
+    --radius-button: var(--radius-button);
+    --spacing-column-gap: var(--spacing-column-gap);
+    --spacing-content-body-bottom-padding: var(--spacing-content-body-bottom-padding);
+    --spacing-content-side-padding: var(--spacing-content-side-padding);
+    --spacing-content-side-padding-mobile: var(--spacing-content-side-padding-mobile);
+    --spacing-section-xs: var(--spacing-section-xs);
+    --spacing-section-sm: var(--spacing-section-sm);
+    --spacing-section-md: var(--spacing-section-md);
+    --spacing-section-lg: var(--spacing-section-lg);
+    --spacing-section-xl: var(--spacing-section-xl);
 }

package/assets/images/logo/air-ui-logo-color.svg

@@ -1,34 +1,34 @@
-<svg width="138" height="46" viewBox="0 0 138 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.36129 45H0L16.5773 0H21.0276L37.605 45H33.2437L18.9582 5.33936H18.6467L4.36129 45ZM7.49874 27.7515H30.1062V31.4429H7.49874V27.7515Z" fill="url(#paint0_linear_4002_260)"/>
-<path d="M49.5763 0V45H45.4152V0H49.5763Z" fill="url(#paint1_linear_4002_260)"/>
-<path d="M61.6922 45V0H76.4004C79.6343 0 82.3341 0.578614 84.4999 1.73584C86.6806 2.87842 88.3198 4.46777 89.4175 6.50391C90.5301 8.52539 91.0864 10.8472 91.0864 13.4692C91.0864 16.0913 90.5301 18.4058 89.4175 20.4126C88.3198 22.4194 86.688 23.9868 84.5222 25.1147C82.3564 26.2427 79.6714 26.8066 76.4672 26.8066H63.9396V23.0493H76.3559C78.7294 23.0493 80.7024 22.6611 82.2748 21.8848C83.8621 21.1084 85.0414 20.0024 85.8128 18.5669C86.599 17.1313 86.9921 15.4321 86.9921 13.4692C86.9921 11.5063 86.599 9.79248 85.8128 8.32764C85.0266 6.84815 83.8398 5.70557 82.2525 4.8999C80.6801 4.09424 78.6923 3.6914 76.2891 3.6914H65.8532V45H61.6922ZM81.7853 24.6973L93 45H88.1937L77.0902 24.6973H81.7853Z" fill="url(#paint2_linear_4002_260)"/>
-<path d="M118.668 16H125.869V35.108C125.869 37.3163 125.34 39.2401 124.28 40.8795C123.221 42.5092 121.744 43.7724 119.849 44.6692C117.954 45.5564 115.753 46 113.245 46C110.709 46 108.493 45.5564 106.598 44.6692C104.703 43.7724 103.231 42.5092 102.182 40.8795C101.132 39.2401 100.607 37.3163 100.607 35.108V16H107.823V34.486C107.823 35.5082 108.046 36.4195 108.493 37.2199C108.95 38.0203 109.587 38.6471 110.403 39.1003C111.219 39.5535 112.167 39.7801 113.245 39.7801C114.324 39.7801 115.267 39.5535 116.073 39.1003C116.89 38.6471 117.526 38.0203 117.983 37.2199C118.44 36.4195 118.668 35.5082 118.668 34.486V16Z" fill="url(#paint3_linear_4002_260)"/>
-<path d="M137.607 16V45.6239H130.392V16H137.607Z" fill="url(#paint4_linear_4002_260)"/>
-<rect x="100.607" y="5.18182" width="37" height="5" fill="url(#paint5_linear_4002_260)"/>
-<defs>
-<linearGradient id="paint0_linear_4002_260" x1="46.5" y1="0" x2="46.5" y2="45" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1C17B4"/>
-<stop offset="1" stop-color="#130F77"/>
-</linearGradient>
-<linearGradient id="paint1_linear_4002_260" x1="46.5" y1="0" x2="46.5" y2="45" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1C17B4"/>
-<stop offset="1" stop-color="#130F77"/>
-</linearGradient>
-<linearGradient id="paint2_linear_4002_260" x1="46.5" y1="0" x2="46.5" y2="45" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1C17B4"/>
-<stop offset="1" stop-color="#130F77"/>
-</linearGradient>
-<linearGradient id="paint3_linear_4002_260" x1="119.107" y1="16" x2="119.107" y2="46" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E11DEB"/>
-<stop offset="1" stop-color="#141085"/>
-</linearGradient>
-<linearGradient id="paint4_linear_4002_260" x1="119.107" y1="16" x2="119.107" y2="46" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E11DEB"/>
-<stop offset="1" stop-color="#141085"/>
-</linearGradient>
-<linearGradient id="paint5_linear_4002_260" x1="119.107" y1="5.18182" x2="119.107" y2="13.1818" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E11DEB"/>
-<stop offset="1" stop-color="#141085"/>
-</linearGradient>
-</defs>
-</svg>
+<svg width="138" height="46" viewBox="0 0 138 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.36129 45H0L16.5773 0H21.0276L37.605 45H33.2437L18.9582 5.33936H18.6467L4.36129 45ZM7.49874 27.7515H30.1062V31.4429H7.49874V27.7515Z" fill="url(#paint0_linear_4002_260)"/>
+<path d="M49.5763 0V45H45.4152V0H49.5763Z" fill="url(#paint1_linear_4002_260)"/>
+<path d="M61.6922 45V0H76.4004C79.6343 0 82.3341 0.578614 84.4999 1.73584C86.6806 2.87842 88.3198 4.46777 89.4175 6.50391C90.5301 8.52539 91.0864 10.8472 91.0864 13.4692C91.0864 16.0913 90.5301 18.4058 89.4175 20.4126C88.3198 22.4194 86.688 23.9868 84.5222 25.1147C82.3564 26.2427 79.6714 26.8066 76.4672 26.8066H63.9396V23.0493H76.3559C78.7294 23.0493 80.7024 22.6611 82.2748 21.8848C83.8621 21.1084 85.0414 20.0024 85.8128 18.5669C86.599 17.1313 86.9921 15.4321 86.9921 13.4692C86.9921 11.5063 86.599 9.79248 85.8128 8.32764C85.0266 6.84815 83.8398 5.70557 82.2525 4.8999C80.6801 4.09424 78.6923 3.6914 76.2891 3.6914H65.8532V45H61.6922ZM81.7853 24.6973L93 45H88.1937L77.0902 24.6973H81.7853Z" fill="url(#paint2_linear_4002_260)"/>
+<path d="M118.668 16H125.869V35.108C125.869 37.3163 125.34 39.2401 124.28 40.8795C123.221 42.5092 121.744 43.7724 119.849 44.6692C117.954 45.5564 115.753 46 113.245 46C110.709 46 108.493 45.5564 106.598 44.6692C104.703 43.7724 103.231 42.5092 102.182 40.8795C101.132 39.2401 100.607 37.3163 100.607 35.108V16H107.823V34.486C107.823 35.5082 108.046 36.4195 108.493 37.2199C108.95 38.0203 109.587 38.6471 110.403 39.1003C111.219 39.5535 112.167 39.7801 113.245 39.7801C114.324 39.7801 115.267 39.5535 116.073 39.1003C116.89 38.6471 117.526 38.0203 117.983 37.2199C118.44 36.4195 118.668 35.5082 118.668 34.486V16Z" fill="url(#paint3_linear_4002_260)"/>
+<path d="M137.607 16V45.6239H130.392V16H137.607Z" fill="url(#paint4_linear_4002_260)"/>
+<rect x="100.607" y="5.18182" width="37" height="5" fill="url(#paint5_linear_4002_260)"/>
+<defs>
+<linearGradient id="paint0_linear_4002_260" x1="46.5" y1="0" x2="46.5" y2="45" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1C17B4"/>
+<stop offset="1" stop-color="#130F77"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4002_260" x1="46.5" y1="0" x2="46.5" y2="45" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1C17B4"/>
+<stop offset="1" stop-color="#130F77"/>
+</linearGradient>
+<linearGradient id="paint2_linear_4002_260" x1="46.5" y1="0" x2="46.5" y2="45" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1C17B4"/>
+<stop offset="1" stop-color="#130F77"/>
+</linearGradient>
+<linearGradient id="paint3_linear_4002_260" x1="119.107" y1="16" x2="119.107" y2="46" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E11DEB"/>
+<stop offset="1" stop-color="#141085"/>
+</linearGradient>
+<linearGradient id="paint4_linear_4002_260" x1="119.107" y1="16" x2="119.107" y2="46" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E11DEB"/>
+<stop offset="1" stop-color="#141085"/>
+</linearGradient>
+<linearGradient id="paint5_linear_4002_260" x1="119.107" y1="5.18182" x2="119.107" y2="13.1818" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E11DEB"/>
+<stop offset="1" stop-color="#141085"/>
+</linearGradient>
+</defs>
+</svg>

package/assets/images/logo/air-ui-logo-white.svg

@@ -1,8 +1,8 @@
-<svg width="138" height="46" viewBox="0 0 138 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.36129 45H0L16.5773 0H21.0276L37.605 45H33.2437L18.9582 5.33936H18.6467L4.36129 45ZM7.49874 27.7515H30.1062V31.4429H7.49874V27.7515Z" fill="#FFFFFF"/>
-<path d="M49.5763 0V45H45.4152V0H49.5763Z" fill="#FFFFFF"/>
-<path d="M61.6922 45V0H76.4004C79.6343 0 82.3341 0.578614 84.4999 1.73584C86.6806 2.87842 88.3198 4.46777 89.4175 6.50391C90.5301 8.52539 91.0864 10.8472 91.0864 13.4692C91.0864 16.0913 90.5301 18.4058 89.4175 20.4126C88.3198 22.4194 86.688 23.9868 84.5222 25.1147C82.3564 26.2427 79.6714 26.8066 76.4672 26.8066H63.9396V23.0493H76.3559C78.7294 23.0493 80.7024 22.6611 82.2748 21.8848C83.8621 21.1084 85.0414 20.0024 85.8128 18.5669C86.599 17.1313 86.9921 15.4321 86.9921 13.4692C86.9921 11.5063 86.599 9.79248 85.8128 8.32764C85.0266 6.84815 83.8398 5.70557 82.2525 4.8999C80.6801 4.09424 78.6923 3.6914 76.2891 3.6914H65.8532V45H61.6922ZM81.7853 24.6973L93 45H88.1937L77.0902 24.6973H81.7853Z" fill="#FFFFFF"/>
-<path d="M118.668 16H125.869V35.108C125.869 37.3163 125.34 39.2401 124.28 40.8795C123.221 42.5092 121.744 43.7724 119.849 44.6692C117.954 45.5564 115.753 46 113.245 46C110.709 46 108.493 45.5564 106.598 44.6692C104.703 43.7724 103.231 42.5092 102.182 40.8795C101.132 39.2401 100.607 37.3163 100.607 35.108V16H107.823V34.486C107.823 35.5082 108.046 36.4195 108.493 37.2199C108.95 38.0203 109.587 38.6471 110.403 39.1003C111.219 39.5535 112.167 39.7801 113.245 39.7801C114.324 39.7801 115.267 39.5535 116.073 39.1003C116.89 38.6471 117.526 38.0203 117.983 37.2199C118.44 36.4195 118.668 35.5082 118.668 34.486V16Z" fill="#FFFFFF"/>
-<path d="M137.607 16V45.6239H130.392V16H137.607Z" fill="#FFFFFF"/>
-<rect x="100.607" y="5.18182" width="37" height="5" fill="#FFFFFF"/>
-</svg>
+<svg width="138" height="46" viewBox="0 0 138 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.36129 45H0L16.5773 0H21.0276L37.605 45H33.2437L18.9582 5.33936H18.6467L4.36129 45ZM7.49874 27.7515H30.1062V31.4429H7.49874V27.7515Z" fill="#FFFFFF"/>
+<path d="M49.5763 0V45H45.4152V0H49.5763Z" fill="#FFFFFF"/>
+<path d="M61.6922 45V0H76.4004C79.6343 0 82.3341 0.578614 84.4999 1.73584C86.6806 2.87842 88.3198 4.46777 89.4175 6.50391C90.5301 8.52539 91.0864 10.8472 91.0864 13.4692C91.0864 16.0913 90.5301 18.4058 89.4175 20.4126C88.3198 22.4194 86.688 23.9868 84.5222 25.1147C82.3564 26.2427 79.6714 26.8066 76.4672 26.8066H63.9396V23.0493H76.3559C78.7294 23.0493 80.7024 22.6611 82.2748 21.8848C83.8621 21.1084 85.0414 20.0024 85.8128 18.5669C86.599 17.1313 86.9921 15.4321 86.9921 13.4692C86.9921 11.5063 86.599 9.79248 85.8128 8.32764C85.0266 6.84815 83.8398 5.70557 82.2525 4.8999C80.6801 4.09424 78.6923 3.6914 76.2891 3.6914H65.8532V45H61.6922ZM81.7853 24.6973L93 45H88.1937L77.0902 24.6973H81.7853Z" fill="#FFFFFF"/>
+<path d="M118.668 16H125.869V35.108C125.869 37.3163 125.34 39.2401 124.28 40.8795C123.221 42.5092 121.744 43.7724 119.849 44.6692C117.954 45.5564 115.753 46 113.245 46C110.709 46 108.493 45.5564 106.598 44.6692C104.703 43.7724 103.231 42.5092 102.182 40.8795C101.132 39.2401 100.607 37.3163 100.607 35.108V16H107.823V34.486C107.823 35.5082 108.046 36.4195 108.493 37.2199C108.95 38.0203 109.587 38.6471 110.403 39.1003C111.219 39.5535 112.167 39.7801 113.245 39.7801C114.324 39.7801 115.267 39.5535 116.073 39.1003C116.89 38.6471 117.526 38.0203 117.983 37.2199C118.44 36.4195 118.668 35.5082 118.668 34.486V16Z" fill="#FFFFFF"/>
+<path d="M137.607 16V45.6239H130.392V16H137.607Z" fill="#FFFFFF"/>
+<rect x="100.607" y="5.18182" width="37" height="5" fill="#FFFFFF"/>
+</svg>

package/components/layouts/Error.vue

@@ -0,0 +1,238 @@
+<template>
+    <div
+        :class="[
+            'w-full',
+            isFullScreen && 'h-screen',
+            'px-content-side-padding',
+            'py-[10vw] md:py-[20vw]',
+            'flex',
+            orientation === Orientation.VERTICAL ? 'flex-col' : 'flex-col md:flex-row',
+            'gap-9',
+            'items-center',
+            'justify-center',
+        ]"
+    >
+        <!-- Slot for images, illustrations or other visual elements -->
+        <slot name="visual-left" />
+
+        <!-- Body -->
+        <div
+            :class="[
+                'w-full',
+                'gap-9',
+                'flex',
+                'flex-col',
+                contentAlignmentClass,
+            ]"
+        >
+            <slot name="visual-top" />
+
+            <ContainedIcon
+                v-if="!$slots['visual-top'] && showIcon"
+                :color="ColorAccent.DANGER"
+                :icon
+                :size="IconContainerSize.XXL"
+            />
+
+            <div 
+                v-if="!$slots['description']"
+                :class="[
+                    'flex',
+                    'flex-col',
+                    'gap-4',
+                    contentAlignmentClass,
+                    'w-full',
+                    'max-w-[600px]',
+                ]"
+            >
+                <!-- 
+                    Overtitle will only display if useGenericErrorTitle is true. 
+                    Otherwise, it will not be displayed because the error code is shown as the title 
+                -->
+                <Heading
+                    :title="errorTitle"
+                    :overtitle="useGenericErrorTitle ? error.statusCode.toString() : ''"
+                    :align="alignContent"
+                    :size="HeadingSize.MD"
+                    :isMobileCentered
+                />
+
+                <p 
+                    :class="[
+                        'text-text-neutral-subtle',
+                        'font-semibold',
+                        textAlignmentClass,
+                        'leading-6',
+                    ]"
+                >
+                    {{
+                        error.statusCode === 404
+                            ? pageNotFoundMessage
+                            : error.message ?? genericErrorMessage
+                    }}
+                </p>
+            </div>
+
+            <slot name="description" />
+
+            <!-- Actions -->
+            <div 
+                :class="[
+                    'w-full', 
+                    'flex', 
+                    'gap-3', 
+                    actionsAlignmentClass, 
+                    'flex-col', 
+                    'md:flex-row',
+                    'mb-4 md:mb-10' // Visual fix to push content a bit up
+                ]"
+            >
+                <ActionButton
+                    v-if="!$slots['actions']"
+                    :actionType="ButtonActionType.LINK"
+                    :text="backToHomeText"
+                    class="w-full md:w-auto"
+                    :icon="backToHomeIcon"
+                    :iconPosition="IconPosition.LEFT"
+                    :to="homeRoute"
+                />
+
+                <slot name="actions" />
+            </div>
+        </div>
+
+        <!-- Slot for images, illustrations or other visual elements -->
+        <slot name="visual-right" />
+    </div>
+</template>
+<script setup lang="ts">
+// Imports
+import type { NuxtError } from "#app"
+
+// Props
+const props = defineProps({
+    error: {
+        type: Object as PropType<NuxtError>,
+        required: true,
+    },
+    showIcon: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    icon: {
+        type: String as PropType<any>,
+        default: "mdiAlertCircleOutline",
+    },
+    pageNotFoundTitle: {
+        type: String as PropType<string>,
+        default: "Page not found",
+    },
+    pageNotFoundMessage: {
+        type: String as PropType<string>,
+        default: "The page you are looking for does not exist or may have been moved. Please try with another page.",
+    },
+    useGenericErrorTitle: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    genericErrorTitle: {
+        type: String as PropType<string>,
+        default: "Oops! Something went wrong",
+    },
+    genericErrorMessage: {
+        type: String as PropType<string>,
+        default: "Something went wrong on our end. Please try again later.",
+    },
+    backToHomeText: {
+        type: String as PropType<string>,
+        default: "Back to home page",
+    },
+    backToHomeIcon: {
+        type: String as PropType<string>,
+        default: "mdiHomeOutline",
+    },
+    homeRoute: {
+        type: String as PropType<string>,
+        default: "/",
+    },
+    isFullScreen: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    orientation: {
+        type: String as PropType<Orientation>,
+        default: Orientation.HORIZONTAL,
+        validator: (value: Orientation) => Object.values(Orientation).includes(value),
+    },
+    alignContent: {
+        type: String as PropType<Align>,
+        default: Align.LEFT,
+        validator: (value: Align) => Object.values(Align).includes(value),
+    },
+    isMobileCentered: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+})
+
+// Computed
+const errorTitle = computed(() => {
+    if (props.useGenericErrorTitle) {
+        return props.genericErrorTitle
+    }
+
+    if (props.error.statusCode === 404 || props.error.statusCode === 400) {
+        return props.pageNotFoundTitle
+    }
+
+    return String(props.error.statusCode)
+})
+
+const pageTitleText = computed(() => errorTitle.value)
+
+// Dynamically set the page title with a watcher (only for error page)
+watchEffect(() => {
+    document.title = pageTitle(pageTitleText.value, App.NAME)
+})
+
+// Computed classes
+const contentAlignmentClass = computed(() => {
+    const base = {
+        [Align.LEFT]: 'md:items-start',
+        [Align.CENTER]: 'md:items-center',
+        [Align.RIGHT]: 'md:items-end',
+    }
+
+    return [
+        props.isMobileCentered ? 'items-center' : '',
+        base[props.alignContent as Align] || 'md:items-center',
+    ].join(' ').trim()
+})
+
+const actionsAlignmentClass = computed(() => {
+    const base = {
+        [Align.LEFT]: 'md:items-start md:justify-start',
+        [Align.CENTER]: 'md:items-center md:justify-center',
+        [Align.RIGHT]: 'md:items-end md:justify-end',
+    }
+
+    return [
+        props.isMobileCentered ? 'items-center justify-center' : '',
+        base[props.alignContent as Align] || 'md:items-center md:justify-center',
+    ].join(' ').trim()
+})
+
+const textAlignmentClass = computed(() => {
+    const base = {
+        [Align.LEFT]: 'md:text-left',
+        [Align.CENTER]: 'md:text-center',
+        [Align.RIGHT]: 'md:text-right',
+    }
+
+    return [
+        props.isMobileCentered ? 'text-center' : '',
+        base[props.alignContent as Align] || 'md:text-center',
+    ].join(' ').trim()
+})
+
+</script>

package/components/layouts/Footer.vue

@@ -28,7 +28,7 @@
                         {{ credits }}
                     </span>
 
-                    <nav v-if="menuItems?.length">
+                    <nav v-if="menuItems.length">
                         <ul class="flex flex-col lg:flex-row gap-5">
                             <li 
                                 v-for="(item, index) in menuItems" 
@@ -48,7 +48,7 @@
                         </ul>
                     </nav>
 
-                    <div v-if="socialNetworks?.length" class="flex gap-5">
+                    <div v-if="socialNetworks.length" class="flex gap-5">
                         <a 
                             v-for="(network, index) in socialNetworks" 
                             :key="index"
@@ -86,8 +86,14 @@ defineProps({
         type: String as PropType<string>,
         default: '© <year> <your-company>. All rights reserved.',
     },
-    menuItems: Array as PropType<MenuItem[]>,
-    socialNetworks: Array as PropType<SocialNetwork[]>,
+    menuItems: {
+        type: Array as PropType<MenuItem[]>,
+        default: () => [],
+    },
+    socialNetworks: {
+        type: Array as PropType<SocialNetwork[]>,
+        default: () => [],
+    },
     hasContentMaxWidth: {
         type: Boolean as PropType<boolean>,
         default: false,

package/components/layouts/Heading.vue

@@ -95,9 +95,9 @@ const props = defineProps({
 // Computed classes
 const alignmentClasses = computed(() => {
     const alignMap = {
-        [Align.LEFT]: 'lg:items-start lg:text-left',
-        [Align.CENTER]: 'lg:items-center lg:text-center',
-        [Align.RIGHT]: 'lg:items-end lg:text-right',
+        [Align.LEFT]: 'md:items-start md:text-left',
+        [Align.CENTER]: 'md:items-center md:text-center',
+        [Align.RIGHT]: 'md:items-end md:text-right',
     }
 
     if (props.isMobileCentered) {

package/eslint.config.mjs

@@ -1,15 +1,15 @@
-// https://eslint.nuxt.com/packages/module
-
-// @ts-check
-import withNuxt from './.nuxt/eslint.config.mjs'
-
-export default withNuxt({
-    rules: {
-        'vue/attribute-hyphenation': 'off',
-        'vue/no-multiple-template-root': 'off',
-        'vue/require-default-prop': 'off',
-        'vue/multi-word-component-names': 'off',
-        '@typescript-eslint/no-explicit-any': 'warn',
-        '@typescript-eslint/ban-ts-comment': 'error'
-    }
-})
+// https://eslint.nuxt.com/packages/module
+
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt({
+    rules: {
+        'vue/attribute-hyphenation': 'off',
+        'vue/no-multiple-template-root': 'off',
+        'vue/require-default-prop': 'off',
+        'vue/multi-word-component-names': 'off',
+        '@typescript-eslint/no-explicit-any': 'warn',
+        '@typescript-eslint/ban-ts-comment': 'error'
+    }
+})

package/models/types/pdfExportTable.ts

@@ -1,6 +1,6 @@
-export interface HeaderConfig {
-    field: string
-    callback?: (value: any) => string
-}
-
+export interface HeaderConfig {
+    field: string
+    callback?: (value: any) => string
+}
+
 export type Headers = Record<string, string | HeaderConfig>

package/nuxt.config.ts

@@ -1,40 +1,40 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
-import tailwindcss from "@tailwindcss/vite"
-
-export default defineNuxtConfig({
-    compatibilityDate: "2024-11-01",
-    devtools: { enabled: false },
-    ssr: false,
-
-    extends: [
-        '../air-ui-utils',
-    ],
-
-    modules: ["@nuxt/image", "nuxt-mdi", "@nuxt/eslint", '@vueuse/nuxt'],
-
-    plugins: ["@/plugins/vue3-toastify"],
-
-    imports: {
-        dirs: [
-            "models/**"
-        ],
-    },
-
-    components: [
-        // Auto-import components based only on its name, not path,
-        {
-            path: "./components",
-            pathPrefix: false,
-        },
-    ],
-
-    eslint: {
-        // options here
-    },
-
-    css: ["./assets/css/main.css"],
-
-    vite: {
-        plugins: [tailwindcss()],
-    },
+// https://nuxt.com/docs/api/configuration/nuxt-config
+import tailwindcss from "@tailwindcss/vite"
+
+export default defineNuxtConfig({
+    compatibilityDate: "2024-11-01",
+    devtools: { enabled: false },
+    ssr: false,
+
+    extends: [
+        '../air-ui-utils',
+    ],
+
+    modules: ["@nuxt/image", "nuxt-mdi", "@nuxt/eslint", '@vueuse/nuxt'],
+
+    plugins: ["@/plugins/vue3-toastify"],
+
+    imports: {
+        dirs: [
+            "models/**"
+        ],
+    },
+
+    components: [
+        // Auto-import components based only on its name, not path,
+        {
+            path: "./components",
+            pathPrefix: false,
+        },
+    ],
+
+    eslint: {
+        // options here
+    },
+
+    css: ["./assets/css/main.css"],
+
+    vite: {
+        plugins: [tailwindcss()],
+    },
 })

package/package.json

@@ -1,57 +1,57 @@
-{
-    "name": "@imaginario27/air-ui-ds",
-    "version": "1.0.17",
-    "author": "imaginario27",
-    "type": "module",
-    "homepage": "https://air-ui.netlify.app/",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/imaginario27/air-ui.git"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "scripts": {
-        "build": "nuxt build",
-        "dev": "nuxt dev",
-        "generate": "nuxt generate",
-        "preview": "nuxt preview",
-        "postinstall": "nuxt prepare",
-        "test": "vitest",
-        "generate-theme": "ts-node scripts/generate-theme.ts",
-        "update-theme-colors": "ts-node scripts/update-ui-theme-colors.ts",
-        "typecheck": "vue-tsc --noEmit -p tsconfig.typecheck.json"
-    },
-    "dependencies": {
-        "@jaxtheprime/vue3-dropzone": "3.4.0",
-        "@nuxt/content": "3.7.1",
-        "@nuxt/eslint": "1.9.0",
-        "@nuxt/image": "1.11.0",
-        "@nuxtjs/i18n": "10.1.0",
-        "@tailwindcss/vite": "4.1.13",
-        "@vueuse/core": "13.9.0",
-        "@vueuse/nuxt": "13.9.0",
-        "jspdf": "3.0.3",
-        "jspdf-autotable": "5.0.2",
-        "nuxt": "4.1.2",
-        "nuxt-mdi": "2.1.1",
-        "qrcode.vue": "3.6.0",
-        "tailwindcss": "4.1.13",
-        "vue": "3.5.22",
-        "vue-json-excel3": "1.0.30",
-        "vue-router": "4.5.1",
-        "vue3-toastify": "0.2.8"
-    },
-    "devDependencies": {
-        "@nuxt/test-utils": "3.19.2",
-        "@vitest/coverage-v8": "3.2.4",
-        "@vue/test-utils": "2.4.6",
-        "eslint": "9.36.0",
-        "happy-dom": "18.0.1",
-        "playwright-core": "1.55.1",
-        "prettier": "3.6.2",
-        "ts-node": "10.9.2",
-        "typescript": "5.9.3",
-        "vitest": "3.2.4"
-    }
-}
+{
+    "name": "@imaginario27/air-ui-ds",
+    "version": "1.0.18",
+    "author": "imaginario27",
+    "type": "module",
+    "homepage": "https://air-ui.netlify.app/",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/imaginario27/air-ui.git"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "build": "nuxt build",
+        "dev": "nuxt dev",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview",
+        "postinstall": "nuxt prepare",
+        "test": "vitest",
+        "generate-theme": "ts-node scripts/generate-theme.ts",
+        "update-theme-colors": "ts-node scripts/update-ui-theme-colors.ts",
+        "typecheck": "vue-tsc --noEmit -p tsconfig.typecheck.json"
+    },
+    "dependencies": {
+        "@jaxtheprime/vue3-dropzone": "3.4.0",
+        "@nuxt/content": "3.7.1",
+        "@nuxt/eslint": "1.9.0",
+        "@nuxt/image": "1.11.0",
+        "@nuxtjs/i18n": "10.1.0",
+        "@tailwindcss/vite": "4.1.13",
+        "@vueuse/core": "13.9.0",
+        "@vueuse/nuxt": "13.9.0",
+        "jspdf": "3.0.3",
+        "jspdf-autotable": "5.0.2",
+        "nuxt": "4.1.2",
+        "nuxt-mdi": "2.1.1",
+        "qrcode.vue": "3.6.0",
+        "tailwindcss": "4.1.13",
+        "vue": "3.5.22",
+        "vue-json-excel3": "1.0.30",
+        "vue-router": "4.5.1",
+        "vue3-toastify": "0.2.8"
+    },
+    "devDependencies": {
+        "@nuxt/test-utils": "3.19.2",
+        "@vitest/coverage-v8": "3.2.4",
+        "@vue/test-utils": "2.4.6",
+        "eslint": "9.36.0",
+        "happy-dom": "18.0.1",
+        "playwright-core": "1.55.1",
+        "prettier": "3.6.2",
+        "ts-node": "10.9.2",
+        "typescript": "5.9.3",
+        "vitest": "3.2.4"
+    }
+}

package/tsconfig.json

@@ -1,7 +1,7 @@
-{
-    // https://nuxt.com/docs/guide/concepts/typescript
-    "extends": "./.nuxt/tsconfig.json",
-    "compilerOptions": {
-        "types": ["vitest/globals"],
-    }
-}
+{
+    // https://nuxt.com/docs/guide/concepts/typescript
+    "extends": "./.nuxt/tsconfig.json",
+    "compilerOptions": {
+        "types": ["vitest/globals"],
+    }
+}