@maboussoleaidant/design-system 0.1.16 → 0.1.18

package/dist/mba-tailwind.css

@@ -45,6 +45,7 @@
   --mba-color-info-800: #1F4076;
   --mba-color-brick-light: #FCF4F0;
   --mba-color-brick: #AC5118;
+  --mba-color-infobox: #fef7e6;
   --mba-color-forest-light: #DEF8EF;
   --mba-color-forest: #16654C;
   --mba-color-rose-light: #FAEFF4;
@@ -80,6 +81,7 @@
   --mba-font-size-xl: 2rem;
   --mba-font-size-xxl: 3rem;
   --mba-font-weight-regular: 400;
+  --mba-font-weight-medium: 500;
   --mba-font-weight-semibold: 600;
   --mba-font-weight-bold: 700;
   --mba-font-weight-extrabold: 800;
@@ -180,6 +182,7 @@
   --mba-space-xxl: 4rem;
   --mba-space-0: 0;
   --mba-space-px: 1px;
+  --mba-space-gap-10: 10px;
   --mba-container-width: 70rem;
 }
 :root {
@@ -248,56 +251,56 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url("../assets/fonts/OpenSans-Regular.woff2") format("woff2");
+  src: url("/assets/fonts/OpenSans-Regular.woff2") format("woff2");
 }
 @font-face {
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url("../assets/fonts/OpenSans-SemiBold.woff2") format("woff2");
+  src: url("/assets/fonts/OpenSans-SemiBold.woff2") format("woff2");
 }
 @font-face {
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url("../assets/fonts/OpenSans-Bold.woff2") format("woff2");
+  src: url("/assets/fonts/OpenSans-Bold.woff2") format("woff2");
 }
 @font-face {
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 800;
   font-display: swap;
-  src: url("../assets/fonts/OpenSans-ExtraBold.woff2") format("woff2");
+  src: url("/assets/fonts/OpenSans-ExtraBold.woff2") format("woff2");
 }
 @font-face {
   font-family: "Congenial";
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url("../assets/fonts/Congenial.woff2") format("woff2");
+  src: url("/assets/fonts/Congenial.woff2") format("woff2");
 }
 @font-face {
   font-family: "Congenial";
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url("../assets/fonts/Congenial-Medium.woff2") format("woff2");
+  src: url("/assets/fonts/Congenial-Medium.woff2") format("woff2");
 }
 @font-face {
   font-family: "Congenial";
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url("../assets/fonts/Congenial-Bold.woff2") format("woff2");
+  src: url("/assets/fonts/Congenial-Bold.woff2") format("woff2");
 }
 @font-face {
   font-family: 'Material Symbols Rounded';
   font-style: normal;
   font-weight: 100 700;
   font-display: block;
-  src: url('../assets/fonts/MaterialSymbolsRounded.woff2') format('woff2');
+  src: url('/assets/fonts/MaterialSymbolsRounded.woff2') format('woff2');
 }
 .material-symbols-rounded {
   font-family: 'Material Symbols Rounded';
@@ -566,29 +569,37 @@ video {
     display: none;
   }
 }
-body {
-  font-family: var(--mba-font-family-text);
-  font-size: var(--mba-font-size-xs);
-  line-height: var(--mba-leading-normal);
-  color: var(--mba-color-text);
-  background-color: var(--mba-color-background);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-a {
-  color: var(--mba-color-link);
-  transition: color var(--mba-transition-fast);
-}
-a:hover {
-  color: var(--mba-color-link-hover);
-}
-:focus-visible {
-  outline: 2px solid var(--mba-color-primary-500);
-  outline-offset: 2px;
-}
-::selection {
-  background-color: var(--mba-color-primary-100);
-  color: var(--mba-color-primary-900);
+@layer base {
+  body {
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xs);
+    line-height: var(--mba-leading-normal);
+    color: var(--mba-color-text);
+    background-color: var(--mba-color-background);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  a {
+    color: var(--mba-color-link);
+    transition: color var(--mba-transition-fast);
+  }
+  .mba-header--partenaire a {
+    color: var(--mba-color-primary-pro-500);
+  }
+  .mba-header--partenaire a:hover {
+    color: var(--mba-color-primary-pro-500);
+  }
+  a:hover {
+    color: var(--mba-color-link-hover);
+  }
+  :focus-visible {
+    outline: 2px solid var(--mba-color-primary-500);
+    outline-offset: 2px;
+  }
+  ::selection {
+    background-color: var(--mba-color-primary-100);
+    color: var(--mba-color-primary-900);
+  }
 }
 @layer components {
   .mba-btn {
@@ -1797,7 +1808,7 @@ a:hover {
     right: 0;
     display: none;
     flex-direction: column;
-    gap: 10px;
+    gap: var(--mba-space-gap-10);
     padding: var(--mba-space-xs);
     border-radius: var(--mba-radius-2xs);
     background-color: var(--mba-color-white);
@@ -1965,6 +1976,540 @@ a:hover {
     gap: var(--mba-space-xxs);
   }
 }
+@layer components {
+  .mba-header {
+    background-color: var(--mba-color-white);
+    border-radius: 0 0 var(--mba-radius-md) var(--mba-radius-md);
+    box-shadow: var(--mba-shadow-xs);
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .mba-header__container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--mba-space-md) var(--mba-space-xl);
+    max-width: var(--mba-container-width);
+    margin: 0 auto;
+  }
+  .mba-header__logo {
+    display: flex;
+    align-items: center;
+    gap: var(--mba-space-xs);
+    text-decoration: none;
+  }
+  .mba-header__logo-img {
+    max-width: 227.92px;
+    height: 32px;
+    display: block;
+  }
+  .mba-header__nav {
+    display: flex;
+    align-items: center;
+    gap: var(--mba-space-md);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    margin-left: var(
+    --mba-space-lg
+  );
+  }
+  .mba-header__nav-item {
+    position: relative;
+  }
+  .mba-header__nav-link {
+    display: flex;
+    align-items: center;
+    gap: var(--mba-space-xxs);
+    padding: var(--mba-space-xxs) var(--mba-space-xs);
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xs);
+    font-weight: var(--mba-font-weight-regular);
+    color: var(--mba-color-primary-900);
+    text-decoration: none;
+    border-radius: var(--mba-radius-sm);
+    transition: background-color var(--mba-transition-base),
+    color var(--mba-transition-base);
+    cursor: pointer;
+    background: none;
+    border: none;
+    white-space: nowrap;
+  }
+  .mba-header__nav-link:hover {
+    background-color: var(--mba-color-pastel-lavender);
+    color: var(--mba-color-primary-900);
+  }
+  .mba-header--partenaire .mba-header__nav-link:hover {
+    color: var(--mba-color-primary-pro-500);
+    background-color: var(--mba-color-pastel-bleuet);
+  }
+  .mba-header--partenaire .mba-header__nav-link {
+    color: var(--mba-color-primary-pro-500);
+  }
+  .mba-header__nav-link--active {
+    background-color: var(--mba-color-pastel-lavender);
+    border-radius: var(--mba-radius-sm);
+    color: var(--mba-color-primary-900);
+  }
+  .mba-header__nav-link .mba-icon,
+.mba-header__mobile-nav-link .mba-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: var(--mba-space-xxs);
+    color: var(--mba-color-primary-900);
+  }
+  .mba-header--partenaire .mba-header__nav-link .mba-icon,
+.mba-header--partenaire .mba-header__mobile-nav-link .mba-icon {
+    color: var(--mba-color-primary-pro-500);
+  }
+  .mba-header__nav-link--open {
+    background-color: var(--mba-color-pastel-lavender);
+    border-radius: var(--mba-radius-sm);
+    color: var(--mba-color-primary-900);
+  }
+  .mba-header--partenaire .mba-header__nav-link--open {
+    background-color: var(--mba-color-pastel-bleuet);
+    color: var(--mba-color-primary-pro-500);
+  }
+  .mba-header__dropdown {
+    position: absolute;
+    top: calc(100% + var(--mba-space-lg));
+    left: 0;
+    width: 739px;
+    background-color: var(--mba-color-white);
+    color: var(--mba-color-primary-500);
+    border-radius: var(--mba-radius-sm);
+    box-shadow: var(--mba-shadow-sm);
+    padding: var(--mba-space-sm);
+    display: none;
+    z-index: 1000;
+    animation: dropdownFadeIn var(--mba-transition-base);
+  }
+  .mba-header__dropdown--open {
+    display: block;
+    box-shadow: var(--mba-shadow-xs);
+  }
+  @keyframes dropdownFadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--mba-space-xs)));
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  .mba-header__dropdown-title {
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xs);
+    font-weight: var(--mba-font-weight-semibold);
+    color: var(--mba-color-text);
+    margin: 0 0 var(--mba-space-xs) 0;
+    padding-bottom: var(--mba-space-sm);
+    border-bottom: 1px solid var(--mba-color-grey-50);
+  }
+  .mba-header--partenaire .mba-header__dropdown-title,
+.mba-header--partenaire .mba-header__dropdown-title:hover {
+    color: var(--mba-color-primary-pro-800);
+  }
+  .mba-header__dropdown-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--mba-space-xxs);
+  }
+  .mba-header__dropdown-item {
+    display: flex;
+    align-items: flex-start;
+    text-decoration: none;
+    cursor: pointer;
+    position: relative;
+    border-radius: var(--mba-radius-sm);
+    border: 1px solid transparent;
+    gap: var(--mba-space-sm);
+    padding: var(--mba-space-xs);
+    transition: background-color var(--mba-transition-base);
+  }
+  .mba-header__dropdown-item::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    padding: 1px;
+    background: var(--mba-gradient-sunset);
+    border-radius: inherit;
+    mask: linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+    mask-composite: exclude;
+    -webkit-mask-composite: xor;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity var(--mba-transition-base);
+  }
+  .mba-header__dropdown-item:hover::before {
+    opacity: 1;
+  }
+  .mba-header__dropdown-icon {
+    margin-top: var(--mba-space-xs);
+    padding: var(--mba-space-sm);
+    gap: var(--mba-space-gap-10);
+    flex-shrink: 0;
+    width: 56px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--mba-color-pastel-lavender);
+    border-radius: var(--mba-radius-sm);
+    color: var(--mba-color-primary-500);
+  }
+  .mba-header__dropdown-icon .mba-icon {
+    font-size: var(--mba-font-size-md);
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-bottom: var(--mba-space-xxs);
+  }
+  .mba-header--partenaire .mba-header__dropdown-icon {
+    background-color: var(--mba-color-pastel-bleuet);
+    color: var(--mba-color-primary-pro-500);
+  }
+  .mba-header__dropdown-content {
+    flex: 1;
+    gap: var(--mba-space-xxs);
+  }
+  .mba-header__dropdown-label {
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xs);
+    font-weight: var(--mba-font-weight-bold);
+    color: var(--mba-color-primary-900);
+    margin: 0 0 var(--mba-space-xxs) 0;
+    display: block;
+  }
+  .mba-header--partenaire .mba-header__dropdown-label {
+    color: var(--mba-color-primary-pro-800);
+  }
+  .mba-header--partenaire .mba-header__dropdown-description {
+    color: var(--mba-color-primary-pro-800);
+  }
+  .mba-header__dropdown-description {
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xs);
+    font-weight: var(--mba-font-weight-regular);
+    color: var(--mba-color-primary-900);
+    margin: 0;
+    line-height: var(--mba-leading-normal);
+  }
+  .mba-header__dropdown-content-wrapper {
+    display: flex;
+    gap: var(--mba-space-md);
+    align-items: stretch;
+    margin-top: var(--mba-space-xs);
+  }
+  .mba-header__dropdown-main {
+    flex: 1;
+    width: 437px;
+    gap: var(--mba-space-sm);
+  }
+  .mba-header__dropdown-infobox {
+    flex: 0 0 246px;
+    background-color: var(--mba-color-pastel-narcisse);
+    border-radius: var(--mba-radius-sm);
+    padding: var(--mba-space-sm);
+    display: flex;
+    flex-direction: column;
+    gap: var(--mba-space-gap-10);
+  }
+  .mba-header__dropdown-infobox-title {
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xxs);
+    font-weight: var(--mba-font-weight-semibold);
+    color: var(--mba-color-primary-900);
+    margin: 0 0 var(--mba-space-xxs) 0;
+  }
+  .mba-header__dropdown-infobox-description {
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xs);
+    font-weight: var(--mba-font-weight-regular);
+    color: var(--mba-color-primary-900);
+    margin: 0;
+    line-height: var(--mba-leading-normal);
+  }
+  .mba-header--partenaire .mba-header__dropdown-infobox-title,
+.mba-header--partenaire .mba-header__dropdown-infobox-description {
+    color: var(--mba-color-primary-pro-800);
+  }
+  .mba-header__burger {
+    display: none;
+    color: var(--mba-color-primary-500);
+    flex-direction: column;
+    gap: var(--mba-space-xxs);
+    background: none;
+    border: none;
+    padding: var(--mba-space-xs);
+    cursor: pointer;
+    border-radius: var(--mba-radius-2xs);
+    transition: background-color var(--mba-transition-base);
+    position: relative;
+    width: 40px;
+    height: 40px;
+    align-items: center;
+    justify-content: center;
+  }
+  .mba-header__burger:hover {
+    background-color: var(--mba-color-grey-50);
+  }
+  .mba-header__burger-line {
+    width: 24px;
+    height: 2px;
+    background-color: var(--mba-color-primary-500);
+    border-radius: var(--mba-radius-2xs);
+    transition: opacity var(--mba-transition-base);
+  }
+  .mba-header__burger--open .mba-header__burger-line {
+    opacity: 0;
+  }
+  .mba-header__burger--open::before,
+.mba-header__burger--open::after {
+    content: "";
+    position: absolute;
+    width: 24px;
+    height: 2px;
+    background-color: var(--mba-color-primary-500);
+    top: 50%;
+    left: 50%;
+  }
+  .mba-header__burger--open::before {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+  .mba-header__burger--open::after {
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
+  .mba-header--partenaire .mba-header__burger-line {
+    background-color: var(--mba-color-primary-pro-500);
+  }
+  .mba-header--partenaire .mba-header__burger--open::before,
+.mba-header--partenaire .mba-header__burger--open::after {
+    background-color: var(--mba-color-primary-pro-500);
+  }
+  .mba-header__mobile-menu {
+    position: absolute;
+    top: calc(100% + var(--mba-space-xs));
+    left: 0;
+    right: 0;
+    background-color: var(--mba-color-white);
+    border-radius: var(--mba-radius-xs);
+    padding: var(--mba-space-md);
+    display: none;
+    z-index: 999;
+    animation: mobileMenuSlideIn var(--mba-transition-slow);
+  }
+  .mba-header__mobile-menu--open {
+    display: block;
+  }
+  @keyframes mobileMenuSlideIn {
+    from {
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--mba-space-sm)));
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  .mba-header__mobile-nav {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--mba-space-xxs);
+  }
+  .mba-header__mobile-nav-item {
+    width: 100%;
+    padding-bottom: var(--mba-space-sm);
+  }
+  .mba-header__mobile-nav-link {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--mba-space-xxs) var(--mba-space-xs);
+    gap: var(--mba-space-sm);
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xs);
+    font-weight: var(--mba-font-weight-semibold);
+    color: var(--mba-color-primary-900);
+    text-decoration: none;
+    border-radius: var(--mba-radius-2xs);
+    transition: background-color var(--mba-transition-base);
+    cursor: pointer;
+    background: none;
+    border: none;
+    width: 100%;
+    text-align: left;
+    position: relative;
+  }
+  .mba-header__mobile-nav-link::after {
+    content: "";
+    position: absolute;
+    left: var(--mba-space-xs);
+    right: var(--mba-space-xs);
+    bottom: 0;
+    height: 2px;
+    border-radius: var(--mba-radius-2xs);
+    background-color: var(--mba-color-primary-100);
+  }
+  .mba-header--partenaire .mba-header__mobile-nav-link::after {
+    background-color: var(--mba-color-primary-pro-100);
+  }
+  .mba-header--partenaire .mba-header__mobile-nav-link {
+    color: var(--mba-color-primary-pro-800);
+  }
+  .mba-header__mobile-nav-link .mba-icon {
+    color: var(--mba-color-primary-500);
+  }
+  .mba-header--partenaire .mba-header__mobile-nav-link .mba-icon {
+    color: var(--mba-color-primary-pro-500);
+  }
+  .mba-header__mobile-nav-link--active {
+    color: var(--mba-color-primary-500);
+    background-color: var(--mba-color-primary-50);
+  }
+  .mba-header__mobile-submenu {
+    display: none;
+    margin-top: var(--mba-space-xs);
+    padding: 0;
+    background-color: transparent;
+    border-radius: 0;
+  }
+  .mba-header__mobile-submenu--open {
+    display: block;
+  }
+  .mba-header__mobile-submenu .mba-header__dropdown-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--mba-space-xs);
+    margin-bottom: var(--mba-space-xs);
+  }
+  .mba-header__mobile-submenu .mba-header__dropdown-item {
+    gap: var(--mba-space-xs);
+    border-radius: 0;
+    transition: color var(--mba-transition-base);
+    background-color: transparent;
+  }
+  .mba-header__mobile-submenu .mba-header__dropdown-item::before {
+    opacity: 0;
+  }
+  .mba-header__mobile-submenu .mba-header__dropdown-item:active::before {
+    opacity: 1;
+  }
+  .mba-header__mobile-submenu .mba-header__dropdown-item:hover {
+    background-color: transparent;
+  }
+  .mba-header__mobile-submenu .mba-header__dropdown-icon {
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--mba-color-pastel-lavender);
+    border-radius: var(--mba-radius-xs);
+    color: var(--mba-color-primary-500);
+  }
+  .mba-header__mobile-submenu .mba-header__dropdown-icon .mba-icon {
+    font-size: var(--mba-font-size-md);
+  }
+  .mba-header--partenaire .mba-header__mobile-submenu .mba-header__dropdown-icon {
+    background-color: var(--mba-color-pastel-bleuet);
+    color: var(--mba-color-primary-pro-500);
+  }
+  .mba-header__mobile-submenu .mba-header__dropdown-content {
+    flex: 1;
+    gap: var(--mba-space-2xs);
+  }
+  .mba-header__mobile-submenu .mba-header__dropdown-label {
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xxs);
+    font-weight: var(--mba-font-weight-semibold);
+    color: var(--mba-color-primary-900);
+    margin: 0 0 var(--mba-space-xxs) 0;
+    display: block;
+  }
+  .mba-header__mobile-submenu .mba-header__dropdown-description {
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xxs);
+    font-weight: var(--mba-font-weight-regular);
+    color: var(--mba-color-primary-900);
+    margin: 0;
+    line-height: var(--mba-leading-normal);
+  }
+  .mba-header__mobile-submenu .mba-header__dropdown-infobox {
+    margin-top: var(--mba-space-sm);
+    flex: 1;
+    background-color: var(--mba-color-pastel-narcisse);
+    border-radius: var(--mba-radius-2xs);
+    padding: var(--mba-space-sm);
+  }
+  .mba-header__mobile-submenu .mba-header__dropdown-infobox-title {
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-sm);
+    font-weight: var(--mba-font-weight-semibold);
+    color: var(--mba-color-text);
+    margin: 0 0 var(--mba-space-xxs) 0;
+  }
+  .mba-header__mobile-submenu .mba-header__dropdown-infobox-description {
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xs);
+    font-weight: var(--mba-font-weight-regular);
+    color: var(--mba-color-text);
+    margin: 0;
+    line-height: var(--mba-leading-normal);
+  }
+  @media (max-width: 768px) {
+    .mba-header {
+      box-shadow: none;
+    }
+    .mba-header__container {
+      padding: var(--mba-space-sm) var(--mba-space-md);
+      justify-content: space-between;
+    }
+    .mba-header__mobile-menu {
+      padding: var(--mba-space-sm) var(--mba-space-xs);
+    }
+    .mba-header__nav {
+      display: none;
+    }
+    .mba-header__burger {
+      display: flex;
+    }
+    .mba-header__logo-img {
+      height: 24px;
+    }
+    .mba-icon {
+      margin-top: var(--mba-space-xxs);
+    }
+  }
+  @media (min-width: 769px) {
+    .mba-header__mobile-menu {
+      display: none !important;
+    }
+    .mba-header--partenaire .mba-header__dropdown--open[data-dropdown="1"] {
+      min-height: 271px;
+      box-sizing: border-box;
+    }
+    .mba-header--partenaire
+    .mba-header__dropdown--open[data-dropdown="1"]
+    .mba-header__dropdown-infobox {
+      height: calc(271px - 2 * var(--mba-space-sm));
+    }
+  }
+}
 @layer components {
   .mba-wave {
     display: block;
@@ -2503,6 +3048,7 @@ a:hover {
     --spacing-md: var(--mba-space-md);
     --spacing-lg: var(--mba-space-lg);
     --spacing-xl: var(--mba-space-xl);
+    --spacing-xxl: var(--mba-space-xxl);
     --spacing-4: 1rem;
     --spacing-6: 1.5rem;
     --spacing-8: 2rem;
@@ -2517,6 +3063,7 @@ a:hover {
     --spacing-36: 9rem;
     --spacing-40: 10rem;
     --spacing-48: 12rem;
+    --spacing-96: 24rem;
     --max-width-xs: 20rem;
     --max-width-sm: 24rem;
     --max-width-md: 28rem;
@@ -2874,6 +3421,9 @@ a:hover {
   .h-32 {
     height: var(--spacing-32);
   }
+  .h-96 {
+    height: var(--spacing-96);
+  }
   .h-screen {
     height: 100vh;
   }
@@ -2975,6 +3525,9 @@ a:hover {
   .cursor-pointer {
     cursor: pointer;
   }
+  .resize {
+    resize: both;
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -3222,6 +3775,9 @@ a:hover {
   .px-sm {
     padding-inline: var(--spacing-sm);
   }
+  .px-xl {
+    padding-inline: var(--spacing-xl);
+  }
   .px-xs {
     padding-inline: var(--spacing-xs);
   }
@@ -3237,6 +3793,9 @@ a:hover {
   .py-xs {
     padding-block: var(--spacing-xs);
   }
+  .py-xxl {
+    padding-block: var(--spacing-xxl);
+  }
   .py-xxs {
     padding-block: var(--spacing-xxs);
   }
@@ -3258,6 +3817,9 @@ a:hover {
   .font-mono {
     font-family: var(--font-mono);
   }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));