@vector-business-services/cristal-ds-web 0.14.0 → 0.16.0

package/dist/index.css

@@ -84,11 +84,30 @@
   color: var(--cr-color-icon-neutral-base);
   font-size: 16px;
 }
-.cr-accordion__region {
-  padding-bottom: var(--cr-padding-padding-7);
-}
 .cr-accordion__content {
-  padding: var(--cr-padding-padding-7);
+  padding: var(--cr-padding-padding-7) var(--cr-padding-padding-7) calc(var(--cr-padding-padding-7) * 2);
+}
+.cr-accordion__region--entrar {
+  max-height: 0;
+}
+.cr-accordion__region--entrando {
+  max-height: 1000px;
+  overflow: hidden;
+  transition: max-height 1s ease-in-out;
+}
+.cr-accordion__region--sair {
+  max-height: 1000px;
+}
+.cr-accordion__region--saindo {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .cr-accordion__region--entrando,
+  .cr-accordion__region--saindo {
+    transition: none;
+  }
 }
 @container (max-width: 767px) {
   .cr-accordion__action {
@@ -96,7 +115,7 @@
     padding-left: var(--cr-padding-padding-6);
   }
   .cr-accordion__content {
-    padding: var(--cr-padding-padding-6);
+    padding: var(--cr-padding-padding-6) var(--cr-padding-padding-6) calc(var(--cr-padding-padding-6) + var(--cr-padding-padding-7));
   }
 }
 
@@ -289,6 +308,55 @@
   color: var(--cr-color-text-brand-base);
 }
 
+/* src/components/comum.css */
+.cr-so-leitor {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.cr-rolagem-fina::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.cr-rolagem-fina::-webkit-scrollbar-thumb {
+  border-radius: var(--cr-radius-full);
+  background-color: var(--cr-color-fill-neutral-subtle);
+}
+.cr-rolagem-fina::-webkit-scrollbar-thumb:hover {
+  background-color: var(--cr-color-fill-neutral-subtle-hover);
+}
+@supports not selector(::-webkit-scrollbar) {
+  .cr-rolagem-fina {
+    scrollbar-width: thin;
+    scrollbar-color: var(--cr-color-fill-neutral-subtle) transparent;
+  }
+}
+.cr-popup--entrar {
+  opacity: 0;
+  transform: scaleY(0.8);
+}
+.cr-popup--entrando {
+  opacity: 1;
+  transform: scaleY(1);
+  transition: transform 120ms cubic-bezier(0, 0, 0.2, 1), opacity 120ms cubic-bezier(0, 0, 0.2, 1);
+}
+.cr-popup--entrou {
+  transform: none;
+}
+.cr-popup--saindo {
+  opacity: 0;
+  transition: opacity 100ms linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .cr-popup--entrando,
+  .cr-popup--saindo {
+    transition: none;
+  }
+}
+
 /* src/components/AutoComplete/AutoComplete.css */
 .cr-autocomplete__root {
   display: flex;
@@ -529,33 +597,6 @@
   overflow-wrap: break-word;
 }
 
-/* src/components/comum.css */
-.cr-so-leitor {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-.cr-rolagem-fina::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-.cr-rolagem-fina::-webkit-scrollbar-thumb {
-  border-radius: var(--cr-radius-full);
-  background-color: var(--cr-color-fill-neutral-subtle);
-}
-.cr-rolagem-fina::-webkit-scrollbar-thumb:hover {
-  background-color: var(--cr-color-fill-neutral-subtle-hover);
-}
-@supports not selector(::-webkit-scrollbar) {
-  .cr-rolagem-fina {
-    scrollbar-width: thin;
-    scrollbar-color: var(--cr-color-fill-neutral-subtle) transparent;
-  }
-}
-
 /* src/components/Chart/Chart.css */
 .cr-chart {
   display: flex;
@@ -1083,10 +1124,10 @@
 }
 .cr-drawer--enter-active {
   transform: none;
-  transition: transform 300ms ease-out;
+  transition: transform 300ms ease;
 }
 .cr-drawer--exit-active {
-  transition: transform 300ms ease-in;
+  transition: transform 300ms ease;
 }
 @media (prefers-reduced-motion: reduce) {
   .cr-drawer__mask:has(> .cr-drawer--enter),
@@ -1884,6 +1925,44 @@
   background-color: color-mix(in srgb, var(--cr-color-fill-neutral-boldest) calc(var(--cr-opacity-opacity-5) * 100%), transparent);
   backdrop-filter: blur(5px);
 }
+.cr-modal__mask:has(> .cr-modal--entrar) {
+  animation: cr-modal-overlay 150ms forwards;
+}
+.cr-modal__mask:has(> .cr-modal--saindo) {
+  animation: cr-modal-overlay 150ms reverse forwards;
+}
+@keyframes cr-modal-overlay {
+  from {
+    background-color: transparent;
+    backdrop-filter: blur(0);
+  }
+}
+.cr-modal--entrar,
+.cr-modal--saindo {
+  opacity: 0;
+  transform: scale(0.7);
+}
+.cr-modal--entrando {
+  opacity: 1;
+  transform: scale(1);
+  transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+.cr-modal--entrou {
+  transform: none;
+}
+.cr-modal--saindo {
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .cr-modal__mask:has(> .cr-modal--entrar),
+  .cr-modal__mask:has(> .cr-modal--saindo) {
+    animation: none;
+  }
+  .cr-modal--entrando,
+  .cr-modal--saindo {
+    transition: none;
+  }
+}
 .cr-modal {
   display: flex;
   flex-direction: column;
@@ -2919,17 +2998,13 @@ body.p-scrollpanel-grabbed {
 }
 
 /* src/components/Toast/Toast.css */
-.cr-toast > div {
-  display: flex;
-  flex-direction: column;
-  gap: var(--cr-spacing-spacing-4);
-}
 .cr-toast__message {
   box-sizing: border-box;
   width: 340px;
   max-width: 100%;
   padding: var(--cr-padding-padding-6);
   border-radius: var(--cr-radius-medium);
+  margin-bottom: var(--cr-spacing-spacing-4);
   box-shadow: var(--cr-elevation-gray-bottom-5);
   color: var(--cr-color-text-neutral-base);
   --cr-toast-close-color: var(--cr-color-icon-neutral-base);
@@ -3015,16 +3090,28 @@ body.p-scrollpanel-grabbed {
 }
 .cr-toast__message--enter {
   opacity: 0;
-  transform: translateY(-8px);
+  transform: translateY(50%);
 }
 .cr-toast__message--enter-active {
   opacity: 1;
-  transform: none;
-  transition: opacity 300ms ease-out, transform 300ms ease-out;
+  transform: translateY(0);
+  transition: transform 0.3s, opacity 0.3s;
+}
+.cr-toast__message--exit {
+  max-height: 1000px;
 }
 .cr-toast__message--exit-active {
+  max-height: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  overflow: hidden;
   opacity: 0;
-  transition: opacity 300ms ease-in;
+  transition:
+    max-height 0.45s cubic-bezier(0, 1, 0, 1),
+    padding 0.45s cubic-bezier(0, 1, 0, 1),
+    opacity 0.3s,
+    margin-bottom 0.3s;
 }
 @media (prefers-reduced-motion: reduce) {
   .cr-toast__message--enter-active,