@zenpatient-org/healthspan-marketing-ui 0.2.1 → 0.2.3

package/dist/components/StepsCarousel/stepsCarousel.module.css

@@ -25,7 +25,6 @@
     flex-wrap: nowrap;
     overflow-y: hidden;
     overflow-x: auto;
-    gap: 28px;
     touch-action: auto;
     pointer-events: auto;
     -webkit-overflow-scrolling: touch;
@@ -65,6 +64,7 @@
 
     .textContainer {
         opacity: 1;
+        transform: scaleX(1);
         pointer-events: auto;
         transition-delay: 0.18s;
     }
@@ -81,6 +81,7 @@
 }
 
 .image {
+    margin-inline: var(--spacing-8);
     width: 232px;
     height: 232px;
     object-fit: cover;
@@ -108,23 +109,23 @@
     content: '';
     position: absolute;
     bottom: 0;
-    left: -14px;
-    right: 14px;
-    width: calc(100% + var(--spacing-28));
-    height: var(--border-width-sm);
-    background-color: var(--border-color-alpha-white-20);
+    width: 100%;
+    background-color: var(--color-neutral-200);
+    height: var(--border-width-md);
+}
+
+.root[data-scheme='dark'] .stepLabel::before {
+    background-color: var(--color-bg-fill-alpha-white-20);
 }
 
 .card:first-child {
     .stepLabel::before {
-        width: calc(100% + var(--spacing-14));
         left: 0;
     }
 }
 
 .card:last-child {
     .stepLabel::before {
-        width: calc(100% + var(--spacing-14));
         right: 0;
     }
 }
@@ -136,7 +137,7 @@
     left: 0;
     width: 100%;
     height: var(--border-width-md);
-    background-color: var(--border-color-solar);
+    background-color: var(--color-neutral-200);
     transform: scaleX(0);
     transition: transform 0.4s;
     pointer-events: none;
@@ -146,6 +147,10 @@
     background-color: var(--border-color-indigo);
 }
 
+.root[data-scheme='dark'] .stepLabel::after {
+    background-color: var(--color-solar-200);
+}
+
 .labelText {
     display: flex;
     min-height: 28px;
@@ -160,7 +165,8 @@
     gap: var(--spacing-8);
     padding: 0 var(--spacing-24);
     opacity: 0;
-    transition: opacity 0.2s;
+    transform: scaleX(0);
+    transition: opacity 0.4s, transform 0.2s;
     pointer-events: none;
 }
 
@@ -198,6 +204,7 @@
 
     .stepsContainer {
         min-height: 460px;
+        inline-padding: 0;
     }
 
     .card.cardActive {
@@ -216,7 +223,7 @@
 
         .textContainer {
             max-width: 420px;
-            transition-delay: 0.25s;
+            transition-delay: 0.3s;
         }
     }
 
@@ -236,7 +243,7 @@
 
     .textContainer {
         max-width: 278px;
-        padding: 0 var(--spacing-8);
+        padding: 0 var(--spacing-14);
         gap: var(--spacing-4);
         height: 101px;
         max-height: 101px;
@@ -262,10 +269,6 @@
     .root {
         padding: 0;
     }
-    
-    .stepsContainer {
-        gap: 0;
-    }
 
     .card {
         width: 100%;

package/dist/modules/CallToAction/callToAction.module.css

@@ -155,7 +155,7 @@
 
 .hsaEligible {
   display: flex;
-  align-items: start;
+  align-items: flex-start;
   gap: var(--spacing-8);
 }
 

package/dist/modules/YourProtocol/yourProtocol.module.css

@@ -89,3 +89,10 @@
         display: none;
     }
 }
+
+@media screen and (width <= 768px) {
+    .callback {
+        max-width: 513px;
+        width: 100%;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.2.1",
+    "version": "0.2.3",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",