elseware-ui 2.34.1 → 2.35.0

package/dist/index.css

@@ -505,6 +505,9 @@ video {
 .mb-5 {
   margin-bottom: 1.25rem;
 }
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
 .ml-2 {
   margin-left: .5rem;
 }
@@ -574,6 +577,9 @@ video {
 .h-1 {
   height: .25rem;
 }
+.h-1\.5 {
+  height: .375rem;
+}
 .h-10 {
   height: 2.5rem;
 }
@@ -622,9 +628,15 @@ video {
 .h-7 {
   height: 1.75rem;
 }
+.h-72 {
+  height: 18rem;
+}
 .h-8 {
   height: 2rem;
 }
+.h-96 {
+  height: 24rem;
+}
 .h-\[130px\] {
   height: 130px;
 }
@@ -692,6 +704,9 @@ video {
 .min-h-4 {
   min-height: 1rem;
 }
+.min-h-56 {
+  min-height: 14rem;
+}
 .min-h-6 {
   min-height: 1.5rem;
 }
@@ -719,12 +734,27 @@ video {
 .min-h-screen {
   min-height: 100vh;
 }
+.w-0\.5 {
+  width: .125rem;
+}
+.w-1 {
+  width: .25rem;
+}
+.w-1\.5 {
+  width: .375rem;
+}
 .w-10 {
   width: 2.5rem;
 }
+.w-10\/12 {
+  width: 83.333333%;
+}
 .w-11 {
   width: 2.75rem;
 }
+.w-11\/12 {
+  width: 91.666667%;
+}
 .w-12 {
   width: 3rem;
 }
@@ -749,6 +779,9 @@ video {
 .w-4 {
   width: 1rem;
 }
+.w-44 {
+  width: 11rem;
+}
 .w-48 {
   width: 12rem;
 }
@@ -824,9 +857,15 @@ video {
 .w-\[60px\] {
   width: 60px;
 }
+.w-\[640px\] {
+  width: 640px;
+}
 .w-\[700px\] {
   width: 700px;
 }
+.w-\[760px\] {
+  width: 760px;
+}
 .w-\[7px\] {
   width: 7px;
 }
@@ -859,6 +898,9 @@ video {
 .min-w-3 {
   min-width: .75rem;
 }
+.min-w-36 {
+  min-width: 9rem;
+}
 .min-w-4 {
   min-width: 1rem;
 }
@@ -1034,11 +1076,18 @@ video {
   --tw-scale-x:1.05;
   --tw-scale-y:1.05;
 }
+.scale-125 {
+  --tw-scale-x:1.25;
+  --tw-scale-y:1.25;
+}
+.scale-125,
+.scale-95 {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scale-95 {
   --tw-scale-x:.95;
   --tw-scale-y:.95;
 }
-.scale-95,
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -1143,6 +1192,9 @@ video {
 .justify-between {
   justify-content: space-between;
 }
+.gap-0\.5 {
+  gap: .125rem;
+}
 .gap-1 {
   gap: .25rem;
 }
@@ -1362,6 +1414,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(220 53 69/var(--tw-border-opacity,1));
 }
+.border-eui-danger-500\/20 {
+  border-color: rgba(220, 53, 69, .2);
+}
 .border-eui-danger-500\/30 {
   border-color: rgba(220, 53, 69, .3);
 }
@@ -1401,6 +1456,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(13 202 240/var(--tw-border-opacity,1));
 }
+.border-eui-info-500\/20 {
+  border-color: rgba(13, 202, 240, .2);
+}
 .border-eui-info-500\/30 {
   border-color: rgba(13, 202, 240, .3);
 }
@@ -1408,6 +1466,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(248 249 250/var(--tw-border-opacity,1));
 }
+.border-eui-light-500\/20 {
+  border-color: rgba(248, 249, 250, .2);
+}
 .border-eui-light-500\/30 {
   border-color: rgba(248, 249, 250, .3);
 }
@@ -1422,6 +1483,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(0 4 15/var(--tw-border-opacity,1));
 }
+.border-eui-primary-500\/20 {
+  border-color: rgba(0, 4, 15, .2);
+}
 .border-eui-primary-500\/30 {
   border-color: rgba(0, 4, 15, .3);
 }
@@ -1436,6 +1500,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(76 217 0/var(--tw-border-opacity,1));
 }
+.border-eui-secondary-500\/20 {
+  border-color: rgba(76, 217, 0, .2);
+}
 .border-eui-secondary-500\/30 {
   border-color: rgba(76, 217, 0, .3);
 }
@@ -1450,6 +1517,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(25 135 84/var(--tw-border-opacity,1));
 }
+.border-eui-success-500\/20 {
+  border-color: rgba(25, 135, 84, .2);
+}
 .border-eui-success-500\/30 {
   border-color: rgba(25, 135, 84, .3);
 }
@@ -1464,6 +1534,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(255 193 7/var(--tw-border-opacity,1));
 }
+.border-eui-warning-500\/20 {
+  border-color: rgba(255, 193, 7, .2);
+}
 .border-eui-warning-500\/30 {
   border-color: rgba(255, 193, 7, .3);
 }
@@ -1642,6 +1715,9 @@ video {
 .bg-blue-600\/40 {
   background-color: rgba(37, 99, 235, .4);
 }
+.bg-current {
+  background-color: currentColor;
+}
 .bg-cyan-500 {
   --tw-bg-opacity:1;
   background-color: rgb(6 182 212/var(--tw-bg-opacity,1));
@@ -1829,12 +1905,18 @@ video {
 .bg-white\/10 {
   background-color: hsla(0, 0%, 100%, .1);
 }
+.bg-white\/20 {
+  background-color: hsla(0, 0%, 100%, .2);
+}
 .bg-white\/40 {
   background-color: hsla(0, 0%, 100%, .4);
 }
 .bg-white\/5 {
   background-color: hsla(0, 0%, 100%, .05);
 }
+.bg-white\/70 {
+  background-color: hsla(0, 0%, 100%, .7);
+}
 .bg-white\/\[0\.03\] {
   background-color: hsla(0, 0%, 100%, .03);
 }
@@ -2294,6 +2376,10 @@ video {
   padding-bottom: 1.25rem;
   padding-top: 1.25rem;
 }
+.py-6 {
+  padding-bottom: 1.5rem;
+  padding-top: 1.5rem;
+}
 .py-\[1px\] {
   padding-bottom: 1px;
   padding-top: 1px;
@@ -2539,6 +2625,9 @@ video {
 .tracking-wide {
   letter-spacing: .025em;
 }
+.tracking-widest {
+  letter-spacing: .1em;
+}
 .text-black {
   --tw-text-opacity:1;
   color: rgb(0 0 0/var(--tw-text-opacity,1));
@@ -2623,6 +2712,10 @@ video {
   --tw-text-opacity:1;
   color: rgb(13 202 240/var(--tw-text-opacity,1));
 }
+.text-eui-light-500 {
+  --tw-text-opacity:1;
+  color: rgb(248 249 250/var(--tw-text-opacity,1));
+}
 .text-eui-light-800 {
   --tw-text-opacity:1;
   color: rgb(98 98 99/var(--tw-text-opacity,1));
@@ -2667,6 +2760,10 @@ video {
   --tw-text-opacity:1;
   color: rgb(255 209 55/var(--tw-text-opacity,1));
 }
+.text-eui-warning-500 {
+  --tw-text-opacity:1;
+  color: rgb(255 193 7/var(--tw-text-opacity,1));
+}
 .text-eui-warning-600 {
   --tw-text-opacity:1;
   color: rgb(204 153 5/var(--tw-text-opacity,1));
@@ -2973,14 +3070,21 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.ring-1 {
+.ring {
   --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+}
+.ring,
+.ring-1 {
   box-shadow:
     var(--tw-ring-offset-shadow),
     var(--tw-ring-shadow),
     var(--tw-shadow,0 0 #0000);
 }
+.ring-1 {
+  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+}
 .ring-inset {
   --tw-ring-inset:inset;
 }
@@ -3766,6 +3870,9 @@ video {
 .dark\:border-white\/5:is(.dark *) {
   border-color: hsla(0, 0%, 100%, .05);
 }
+.dark\:bg-black\/60:is(.dark *) {
+  background-color: rgba(0, 0, 0, .6);
+}
 .dark\:bg-eui-dark-100:is(.dark *) {
   --tw-bg-opacity:1;
   background-color: rgb(134 138 141/var(--tw-bg-opacity,1));
@@ -3897,6 +4004,10 @@ video {
   --tw-text-opacity:1;
   color: rgb(112 122 147/var(--tw-text-opacity,1));
 }
+.dark\:text-eui-primary-400:is(.dark *) {
+  --tw-text-opacity:1;
+  color: rgb(76 86 115/var(--tw-text-opacity,1));
+}
 .dark\:text-eui-secondary-400:is(.dark *) {
   --tw-text-opacity:1;
   color: rgb(100 226 69/var(--tw-text-opacity,1));
@@ -4080,6 +4191,9 @@ video {
   color: rgb(209 213 219/var(--tw-text-opacity,1));
 }
 @media (min-width: 768px) {
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
   .md\:flex-row {
     flex-direction: row;
   }
@@ -4696,6 +4810,9 @@ video {
 .mb-5 {
   margin-bottom: 1.25rem;
 }
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
 .ml-2 {
   margin-left: .5rem;
 }
@@ -4765,6 +4882,9 @@ video {
 .h-1 {
   height: .25rem;
 }
+.h-1\.5 {
+  height: .375rem;
+}
 .h-10 {
   height: 2.5rem;
 }
@@ -4813,9 +4933,15 @@ video {
 .h-7 {
   height: 1.75rem;
 }
+.h-72 {
+  height: 18rem;
+}
 .h-8 {
   height: 2rem;
 }
+.h-96 {
+  height: 24rem;
+}
 .h-\[130px\] {
   height: 130px;
 }
@@ -4883,6 +5009,9 @@ video {
 .min-h-4 {
   min-height: 1rem;
 }
+.min-h-56 {
+  min-height: 14rem;
+}
 .min-h-6 {
   min-height: 1.5rem;
 }
@@ -4910,12 +5039,27 @@ video {
 .min-h-screen {
   min-height: 100vh;
 }
+.w-0\.5 {
+  width: .125rem;
+}
+.w-1 {
+  width: .25rem;
+}
+.w-1\.5 {
+  width: .375rem;
+}
 .w-10 {
   width: 2.5rem;
 }
+.w-10\/12 {
+  width: 83.333333%;
+}
 .w-11 {
   width: 2.75rem;
 }
+.w-11\/12 {
+  width: 91.666667%;
+}
 .w-12 {
   width: 3rem;
 }
@@ -4940,6 +5084,9 @@ video {
 .w-4 {
   width: 1rem;
 }
+.w-44 {
+  width: 11rem;
+}
 .w-48 {
   width: 12rem;
 }
@@ -5015,9 +5162,15 @@ video {
 .w-\[60px\] {
   width: 60px;
 }
+.w-\[640px\] {
+  width: 640px;
+}
 .w-\[700px\] {
   width: 700px;
 }
+.w-\[760px\] {
+  width: 760px;
+}
 .w-\[7px\] {
   width: 7px;
 }
@@ -5050,6 +5203,9 @@ video {
 .min-w-3 {
   min-width: .75rem;
 }
+.min-w-36 {
+  min-width: 9rem;
+}
 .min-w-4 {
   min-width: 1rem;
 }
@@ -5225,11 +5381,18 @@ video {
   --tw-scale-x:1.05;
   --tw-scale-y:1.05;
 }
+.scale-125 {
+  --tw-scale-x:1.25;
+  --tw-scale-y:1.25;
+}
+.scale-125,
+.scale-95 {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scale-95 {
   --tw-scale-x:.95;
   --tw-scale-y:.95;
 }
-.scale-95,
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -5334,6 +5497,9 @@ video {
 .justify-between {
   justify-content: space-between;
 }
+.gap-0\.5 {
+  gap: .125rem;
+}
 .gap-1 {
   gap: .25rem;
 }
@@ -5553,6 +5719,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(220 53 69/var(--tw-border-opacity,1));
 }
+.border-eui-danger-500\/20 {
+  border-color: rgba(220, 53, 69, .2);
+}
 .border-eui-danger-500\/30 {
   border-color: rgba(220, 53, 69, .3);
 }
@@ -5592,6 +5761,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(13 202 240/var(--tw-border-opacity,1));
 }
+.border-eui-info-500\/20 {
+  border-color: rgba(13, 202, 240, .2);
+}
 .border-eui-info-500\/30 {
   border-color: rgba(13, 202, 240, .3);
 }
@@ -5599,6 +5771,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(248 249 250/var(--tw-border-opacity,1));
 }
+.border-eui-light-500\/20 {
+  border-color: rgba(248, 249, 250, .2);
+}
 .border-eui-light-500\/30 {
   border-color: rgba(248, 249, 250, .3);
 }
@@ -5613,6 +5788,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(0 4 15/var(--tw-border-opacity,1));
 }
+.border-eui-primary-500\/20 {
+  border-color: rgba(0, 4, 15, .2);
+}
 .border-eui-primary-500\/30 {
   border-color: rgba(0, 4, 15, .3);
 }
@@ -5627,6 +5805,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(76 217 0/var(--tw-border-opacity,1));
 }
+.border-eui-secondary-500\/20 {
+  border-color: rgba(76, 217, 0, .2);
+}
 .border-eui-secondary-500\/30 {
   border-color: rgba(76, 217, 0, .3);
 }
@@ -5641,6 +5822,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(25 135 84/var(--tw-border-opacity,1));
 }
+.border-eui-success-500\/20 {
+  border-color: rgba(25, 135, 84, .2);
+}
 .border-eui-success-500\/30 {
   border-color: rgba(25, 135, 84, .3);
 }
@@ -5655,6 +5839,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(255 193 7/var(--tw-border-opacity,1));
 }
+.border-eui-warning-500\/20 {
+  border-color: rgba(255, 193, 7, .2);
+}
 .border-eui-warning-500\/30 {
   border-color: rgba(255, 193, 7, .3);
 }
@@ -5833,6 +6020,9 @@ video {
 .bg-blue-600\/40 {
   background-color: rgba(37, 99, 235, .4);
 }
+.bg-current {
+  background-color: currentColor;
+}
 .bg-cyan-500 {
   --tw-bg-opacity:1;
   background-color: rgb(6 182 212/var(--tw-bg-opacity,1));
@@ -6020,12 +6210,18 @@ video {
 .bg-white\/10 {
   background-color: hsla(0, 0%, 100%, .1);
 }
+.bg-white\/20 {
+  background-color: hsla(0, 0%, 100%, .2);
+}
 .bg-white\/40 {
   background-color: hsla(0, 0%, 100%, .4);
 }
 .bg-white\/5 {
   background-color: hsla(0, 0%, 100%, .05);
 }
+.bg-white\/70 {
+  background-color: hsla(0, 0%, 100%, .7);
+}
 .bg-white\/\[0\.03\] {
   background-color: hsla(0, 0%, 100%, .03);
 }
@@ -6485,6 +6681,10 @@ video {
   padding-bottom: 1.25rem;
   padding-top: 1.25rem;
 }
+.py-6 {
+  padding-bottom: 1.5rem;
+  padding-top: 1.5rem;
+}
 .py-\[1px\] {
   padding-bottom: 1px;
   padding-top: 1px;
@@ -6730,6 +6930,9 @@ video {
 .tracking-wide {
   letter-spacing: .025em;
 }
+.tracking-widest {
+  letter-spacing: .1em;
+}
 .text-black {
   --tw-text-opacity:1;
   color: rgb(0 0 0/var(--tw-text-opacity,1));
@@ -6814,6 +7017,10 @@ video {
   --tw-text-opacity:1;
   color: rgb(13 202 240/var(--tw-text-opacity,1));
 }
+.text-eui-light-500 {
+  --tw-text-opacity:1;
+  color: rgb(248 249 250/var(--tw-text-opacity,1));
+}
 .text-eui-light-800 {
   --tw-text-opacity:1;
   color: rgb(98 98 99/var(--tw-text-opacity,1));
@@ -6858,6 +7065,10 @@ video {
   --tw-text-opacity:1;
   color: rgb(255 209 55/var(--tw-text-opacity,1));
 }
+.text-eui-warning-500 {
+  --tw-text-opacity:1;
+  color: rgb(255 193 7/var(--tw-text-opacity,1));
+}
 .text-eui-warning-600 {
   --tw-text-opacity:1;
   color: rgb(204 153 5/var(--tw-text-opacity,1));
@@ -7164,14 +7375,21 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.ring-1 {
+.ring {
   --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+}
+.ring,
+.ring-1 {
   box-shadow:
     var(--tw-ring-offset-shadow),
     var(--tw-ring-shadow),
     var(--tw-shadow,0 0 #0000);
 }
+.ring-1 {
+  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+}
 .ring-inset {
   --tw-ring-inset:inset;
 }
@@ -8042,6 +8260,9 @@ video {
 .dark\:border-white\/5:is(.dark *) {
   border-color: hsla(0, 0%, 100%, .05);
 }
+.dark\:bg-black\/60:is(.dark *) {
+  background-color: rgba(0, 0, 0, .6);
+}
 .dark\:bg-eui-dark-100:is(.dark *) {
   --tw-bg-opacity:1;
   background-color: rgb(134 138 141/var(--tw-bg-opacity,1));
@@ -8173,6 +8394,10 @@ video {
   --tw-text-opacity:1;
   color: rgb(112 122 147/var(--tw-text-opacity,1));
 }
+.dark\:text-eui-primary-400:is(.dark *) {
+  --tw-text-opacity:1;
+  color: rgb(76 86 115/var(--tw-text-opacity,1));
+}
 .dark\:text-eui-secondary-400:is(.dark *) {
   --tw-text-opacity:1;
   color: rgb(100 226 69/var(--tw-text-opacity,1));
@@ -8356,6 +8581,9 @@ video {
   color: rgb(209 213 219/var(--tw-text-opacity,1));
 }
 @media (min-width: 768px) {
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
   .md\:flex-row {
     flex-direction: row;
   }
@@ -8471,6 +8699,233 @@ video {
   }
 }
 
+/* src/components/data-display/spinner/Spinner.css */
+.eui-spinner-border {
+  animation: eui-spinner-spin .75s linear infinite;
+  border-color: currentColor transparent currentColor currentColor;
+  border-style: solid;
+}
+.eui-spinner-ring {
+  animation: eui-spinner-spin .8s linear infinite;
+  border-color: currentColor currentColor transparent transparent;
+  border-style: solid;
+}
+.eui-spinner-dual-ring {
+  position: relative;
+}
+.eui-spinner-dual-ring:after,
+.eui-spinner-dual-ring:before {
+  border-color: currentColor transparent;
+  border-radius: 9999px;
+  border-style: solid;
+  border-width: max(2px, calc(var(--eui-spinner-size, 2rem)*.1));
+  box-sizing: border-box;
+  content: "";
+  inset: 0;
+  position: absolute;
+}
+.eui-spinner-dual-ring:before {
+  animation: eui-spinner-spin .8s linear infinite;
+}
+.eui-spinner-dual-ring:after {
+  animation: eui-spinner-spin-reverse .9s linear infinite;
+  inset: 22%;
+  opacity: .45;
+}
+.eui-spinner-dot {
+  animation: eui-spinner-dot-bounce .8s ease-in-out infinite;
+}
+.eui-spinner-dot:nth-child(2) {
+  animation-delay: .12s;
+}
+.eui-spinner-dot:nth-child(3) {
+  animation-delay: .24s;
+}
+.eui-spinner-bar {
+  animation: eui-spinner-bar-scale .9s ease-in-out infinite;
+  transform-origin: center;
+}
+.eui-spinner-bar:first-child {
+  animation-delay: 0s;
+}
+.eui-spinner-bar:nth-child(2) {
+  animation-delay: .1s;
+}
+.eui-spinner-bar:nth-child(3) {
+  animation-delay: .2s;
+}
+.eui-spinner-bar:nth-child(4) {
+  animation-delay: .3s;
+}
+.eui-spinner-bar:nth-child(5) {
+  animation-delay: .4s;
+}
+.eui-spinner-pulse {
+  animation: eui-spinner-pulse 1s ease-in-out infinite;
+  background-color: currentColor;
+  border-radius: 9999px;
+}
+.eui-spinner-orbit {
+  animation: eui-spinner-spin 1s linear infinite;
+  border: 1px solid;
+  border-radius: 9999px;
+  opacity: .9;
+  position: relative;
+}
+.eui-spinner-orbit:before {
+  background-color: currentColor;
+  border-radius: 9999px;
+  content: "";
+  height: 25%;
+  left: 50%;
+  position: absolute;
+  top: -12.5%;
+  transform: translateX(-50%);
+  width: 25%;
+}
+.eui-spinner-ripple {
+  position: relative;
+}
+.eui-spinner-ripple:after,
+.eui-spinner-ripple:before {
+  animation: eui-spinner-ripple 1.15s cubic-bezier(0, .2, .8, 1) infinite;
+  border: 2px solid;
+  border-radius: 9999px;
+  box-sizing: border-box;
+  content: "";
+  inset: 0;
+  position: absolute;
+}
+.eui-spinner-ripple:after {
+  animation-delay: -.55s;
+}
+.eui-spinner-grid-dot {
+  animation: eui-spinner-grid-fade 1.1s ease-in-out infinite;
+  background-color: currentColor;
+  border-radius: 9999px;
+}
+.eui-spinner-grid-dot:first-child {
+  animation-delay: 0s;
+}
+.eui-spinner-grid-dot:nth-child(2) {
+  animation-delay: .1s;
+}
+.eui-spinner-grid-dot:nth-child(3) {
+  animation-delay: .2s;
+}
+.eui-spinner-grid-dot:nth-child(4) {
+  animation-delay: .1s;
+}
+.eui-spinner-grid-dot:nth-child(5) {
+  animation-delay: .2s;
+}
+.eui-spinner-grid-dot:nth-child(6) {
+  animation-delay: .3s;
+}
+.eui-spinner-grid-dot:nth-child(7) {
+  animation-delay: .2s;
+}
+.eui-spinner-grid-dot:nth-child(8) {
+  animation-delay: .3s;
+}
+.eui-spinner-grid-dot:nth-child(9) {
+  animation-delay: .4s;
+}
+.eui-spinner-wave-item {
+  animation: eui-spinner-wave 1s ease-in-out infinite;
+  background-color: currentColor;
+  border-radius: 9999px;
+}
+.eui-spinner-wave-item:first-child {
+  animation-delay: 0s;
+}
+.eui-spinner-wave-item:nth-child(2) {
+  animation-delay: .1s;
+}
+.eui-spinner-wave-item:nth-child(3) {
+  animation-delay: .2s;
+}
+.eui-spinner-wave-item:nth-child(4) {
+  animation-delay: .3s;
+}
+.eui-spinner-wave-item:nth-child(5) {
+  animation-delay: .4s;
+}
+@keyframes eui-spinner-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+@keyframes eui-spinner-spin-reverse {
+  to {
+    transform: rotate(-1turn);
+  }
+}
+@keyframes eui-spinner-dot-bounce {
+  0%, 80%, to {
+    opacity: .45;
+    transform: scale(.75);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes eui-spinner-bar-scale {
+  0%, to {
+    opacity: .45;
+    transform: scaleY(.45);
+  }
+  50% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+@keyframes eui-spinner-pulse {
+  0% {
+    opacity: .5;
+    transform: scale(.85);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: .5;
+    transform: scale(.85);
+  }
+}
+@keyframes eui-spinner-ripple {
+  0% {
+    opacity: 1;
+    transform: scale(.15);
+  }
+  to {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+@keyframes eui-spinner-grid-fade {
+  0%, 70%, to {
+    opacity: .35;
+    transform: scale(.8);
+  }
+  35% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes eui-spinner-wave {
+  0%, to {
+    opacity: .45;
+    transform: scaleY(.35);
+  }
+  50% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
 /* src/styles/components/markdown/index.css */
 *,
 :after,
@@ -8978,6 +9433,9 @@ video {
 .mb-5 {
   margin-bottom: 1.25rem;
 }
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
 .ml-2 {
   margin-left: .5rem;
 }
@@ -9047,6 +9505,9 @@ video {
 .h-1 {
   height: .25rem;
 }
+.h-1\.5 {
+  height: .375rem;
+}
 .h-10 {
   height: 2.5rem;
 }
@@ -9095,9 +9556,15 @@ video {
 .h-7 {
   height: 1.75rem;
 }
+.h-72 {
+  height: 18rem;
+}
 .h-8 {
   height: 2rem;
 }
+.h-96 {
+  height: 24rem;
+}
 .h-\[130px\] {
   height: 130px;
 }
@@ -9165,6 +9632,9 @@ video {
 .min-h-4 {
   min-height: 1rem;
 }
+.min-h-56 {
+  min-height: 14rem;
+}
 .min-h-6 {
   min-height: 1.5rem;
 }
@@ -9192,12 +9662,27 @@ video {
 .min-h-screen {
   min-height: 100vh;
 }
+.w-0\.5 {
+  width: .125rem;
+}
+.w-1 {
+  width: .25rem;
+}
+.w-1\.5 {
+  width: .375rem;
+}
 .w-10 {
   width: 2.5rem;
 }
+.w-10\/12 {
+  width: 83.333333%;
+}
 .w-11 {
   width: 2.75rem;
 }
+.w-11\/12 {
+  width: 91.666667%;
+}
 .w-12 {
   width: 3rem;
 }
@@ -9222,6 +9707,9 @@ video {
 .w-4 {
   width: 1rem;
 }
+.w-44 {
+  width: 11rem;
+}
 .w-48 {
   width: 12rem;
 }
@@ -9297,9 +9785,15 @@ video {
 .w-\[60px\] {
   width: 60px;
 }
+.w-\[640px\] {
+  width: 640px;
+}
 .w-\[700px\] {
   width: 700px;
 }
+.w-\[760px\] {
+  width: 760px;
+}
 .w-\[7px\] {
   width: 7px;
 }
@@ -9332,6 +9826,9 @@ video {
 .min-w-3 {
   min-width: .75rem;
 }
+.min-w-36 {
+  min-width: 9rem;
+}
 .min-w-4 {
   min-width: 1rem;
 }
@@ -9507,11 +10004,18 @@ video {
   --tw-scale-x:1.05;
   --tw-scale-y:1.05;
 }
+.scale-125 {
+  --tw-scale-x:1.25;
+  --tw-scale-y:1.25;
+}
+.scale-125,
+.scale-95 {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scale-95 {
   --tw-scale-x:.95;
   --tw-scale-y:.95;
 }
-.scale-95,
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -9616,6 +10120,9 @@ video {
 .justify-between {
   justify-content: space-between;
 }
+.gap-0\.5 {
+  gap: .125rem;
+}
 .gap-1 {
   gap: .25rem;
 }
@@ -9835,6 +10342,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(220 53 69/var(--tw-border-opacity,1));
 }
+.border-eui-danger-500\/20 {
+  border-color: rgba(220, 53, 69, .2);
+}
 .border-eui-danger-500\/30 {
   border-color: rgba(220, 53, 69, .3);
 }
@@ -9874,6 +10384,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(13 202 240/var(--tw-border-opacity,1));
 }
+.border-eui-info-500\/20 {
+  border-color: rgba(13, 202, 240, .2);
+}
 .border-eui-info-500\/30 {
   border-color: rgba(13, 202, 240, .3);
 }
@@ -9881,6 +10394,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(248 249 250/var(--tw-border-opacity,1));
 }
+.border-eui-light-500\/20 {
+  border-color: rgba(248, 249, 250, .2);
+}
 .border-eui-light-500\/30 {
   border-color: rgba(248, 249, 250, .3);
 }
@@ -9895,6 +10411,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(0 4 15/var(--tw-border-opacity,1));
 }
+.border-eui-primary-500\/20 {
+  border-color: rgba(0, 4, 15, .2);
+}
 .border-eui-primary-500\/30 {
   border-color: rgba(0, 4, 15, .3);
 }
@@ -9909,6 +10428,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(76 217 0/var(--tw-border-opacity,1));
 }
+.border-eui-secondary-500\/20 {
+  border-color: rgba(76, 217, 0, .2);
+}
 .border-eui-secondary-500\/30 {
   border-color: rgba(76, 217, 0, .3);
 }
@@ -9923,6 +10445,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(25 135 84/var(--tw-border-opacity,1));
 }
+.border-eui-success-500\/20 {
+  border-color: rgba(25, 135, 84, .2);
+}
 .border-eui-success-500\/30 {
   border-color: rgba(25, 135, 84, .3);
 }
@@ -9937,6 +10462,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(255 193 7/var(--tw-border-opacity,1));
 }
+.border-eui-warning-500\/20 {
+  border-color: rgba(255, 193, 7, .2);
+}
 .border-eui-warning-500\/30 {
   border-color: rgba(255, 193, 7, .3);
 }
@@ -10115,6 +10643,9 @@ video {
 .bg-blue-600\/40 {
   background-color: rgba(37, 99, 235, .4);
 }
+.bg-current {
+  background-color: currentColor;
+}
 .bg-cyan-500 {
   --tw-bg-opacity:1;
   background-color: rgb(6 182 212/var(--tw-bg-opacity,1));
@@ -10302,12 +10833,18 @@ video {
 .bg-white\/10 {
   background-color: hsla(0, 0%, 100%, .1);
 }
+.bg-white\/20 {
+  background-color: hsla(0, 0%, 100%, .2);
+}
 .bg-white\/40 {
   background-color: hsla(0, 0%, 100%, .4);
 }
 .bg-white\/5 {
   background-color: hsla(0, 0%, 100%, .05);
 }
+.bg-white\/70 {
+  background-color: hsla(0, 0%, 100%, .7);
+}
 .bg-white\/\[0\.03\] {
   background-color: hsla(0, 0%, 100%, .03);
 }
@@ -10767,6 +11304,10 @@ video {
   padding-bottom: 1.25rem;
   padding-top: 1.25rem;
 }
+.py-6 {
+  padding-bottom: 1.5rem;
+  padding-top: 1.5rem;
+}
 .py-\[1px\] {
   padding-bottom: 1px;
   padding-top: 1px;
@@ -11012,6 +11553,9 @@ video {
 .tracking-wide {
   letter-spacing: .025em;
 }
+.tracking-widest {
+  letter-spacing: .1em;
+}
 .text-black {
   --tw-text-opacity:1;
   color: rgb(0 0 0/var(--tw-text-opacity,1));
@@ -11096,6 +11640,10 @@ video {
   --tw-text-opacity:1;
   color: rgb(13 202 240/var(--tw-text-opacity,1));
 }
+.text-eui-light-500 {
+  --tw-text-opacity:1;
+  color: rgb(248 249 250/var(--tw-text-opacity,1));
+}
 .text-eui-light-800 {
   --tw-text-opacity:1;
   color: rgb(98 98 99/var(--tw-text-opacity,1));
@@ -11140,6 +11688,10 @@ video {
   --tw-text-opacity:1;
   color: rgb(255 209 55/var(--tw-text-opacity,1));
 }
+.text-eui-warning-500 {
+  --tw-text-opacity:1;
+  color: rgb(255 193 7/var(--tw-text-opacity,1));
+}
 .text-eui-warning-600 {
   --tw-text-opacity:1;
   color: rgb(204 153 5/var(--tw-text-opacity,1));
@@ -11446,14 +11998,21 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.ring-1 {
+.ring {
   --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+}
+.ring,
+.ring-1 {
   box-shadow:
     var(--tw-ring-offset-shadow),
     var(--tw-ring-shadow),
     var(--tw-shadow,0 0 #0000);
 }
+.ring-1 {
+  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+}
 .ring-inset {
   --tw-ring-inset:inset;
 }
@@ -12353,6 +12912,9 @@ video {
 .dark\:border-white\/5:is(.dark *) {
   border-color: hsla(0, 0%, 100%, .05);
 }
+.dark\:bg-black\/60:is(.dark *) {
+  background-color: rgba(0, 0, 0, .6);
+}
 .dark\:bg-eui-dark-100:is(.dark *) {
   --tw-bg-opacity:1;
   background-color: rgb(134 138 141/var(--tw-bg-opacity,1));
@@ -12484,6 +13046,10 @@ video {
   --tw-text-opacity:1;
   color: rgb(112 122 147/var(--tw-text-opacity,1));
 }
+.dark\:text-eui-primary-400:is(.dark *) {
+  --tw-text-opacity:1;
+  color: rgb(76 86 115/var(--tw-text-opacity,1));
+}
 .dark\:text-eui-secondary-400:is(.dark *) {
   --tw-text-opacity:1;
   color: rgb(100 226 69/var(--tw-text-opacity,1));
@@ -12667,6 +13233,9 @@ video {
   color: rgb(209 213 219/var(--tw-text-opacity,1));
 }
 @media (min-width: 768px) {
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
   .md\:flex-row {
     flex-direction: row;
   }