@zenpatient-org/healthspan-marketing-ui 0.2.2 → 0.2.4

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/ScrollingText/ScrollingText.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../src/modules/ScrollingText/scrollingText.module.css"),l=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js"),i=require("../../components/Typography/Typography.cjs.js"),o=({label:r,url:n})=>e.jsx("a",{href:n,className:t.label,children:e.jsx(i.Typography,{defaultVariant:"labelMd",emphasis:!0,mobileVariant:"labelSm",weight:"regular",children:r})}),s=({labels:r})=>e.jsx("section",{className:t.root,children:r.length>0&&e.jsx("div",{className:t.footer,children:e.jsx(l.InfiniteScroll,{items:r,renderItem:o})})});exports.ScrollingText=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../src/modules/ScrollingText/scrollingText.module.css"),i=require("../../utils/cn/cn.cjs.js"),a=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js"),l=require("../../components/Typography/Typography.cjs.js"),s=({label:r,url:n})=>n?e.jsx("a",{href:n,className:t.label,children:e.jsx(l.Typography,{defaultVariant:"labelMd",emphasis:!0,mobileVariant:"labelSm",weight:"regular",children:r})}):e.jsx("div",{className:i.cn(t.label,t.default),children:e.jsx(l.Typography,{defaultVariant:"labelMd",emphasis:!0,mobileVariant:"labelSm",weight:"regular",children:r})}),o=({labels:r})=>e.jsx("section",{className:t.root,children:r.length>0&&e.jsx("div",{className:t.footer,children:e.jsx(a.InfiniteScroll,{items:r,renderItem:s})})});exports.ScrollingText=o;

package/dist/modules/ScrollingText/ScrollingText.d.ts

@@ -1,7 +1,7 @@
 export type TScrollingText = {
     labels: ReadonlyArray<{
         label: string;
-        url: string;
+        url?: string;
     }>;
 };
 export declare const ScrollingText: ({ labels }: TScrollingText) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/ScrollingText/ScrollingText.es.js

@@ -1,8 +1,9 @@
 import { jsx as e } from "react/jsx-runtime";
-import t from "../../modules/ScrollingText/scrollingText.module.css";
-import { InfiniteScroll as o } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
-import { Typography as i } from "../../components/Typography/Typography.es.js";
-const a = ({ label: r, url: l }) => /* @__PURE__ */ e("a", { href: l, className: t.label, children: /* @__PURE__ */ e(i, { defaultVariant: "labelMd", emphasis: !0, mobileVariant: "labelSm", weight: "regular", children: r }) }), d = ({ labels: r }) => /* @__PURE__ */ e("section", { className: t.root, children: r.length > 0 && /* @__PURE__ */ e("div", { className: t.footer, children: /* @__PURE__ */ e(o, { items: r, renderItem: a }) }) });
+import l from "../../modules/ScrollingText/scrollingText.module.css";
+import { cn as i } from "../../utils/cn/cn.es.js";
+import { InfiniteScroll as n } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
+import { Typography as a } from "../../components/Typography/Typography.es.js";
+const o = ({ label: r, url: t }) => t ? /* @__PURE__ */ e("a", { href: t, className: l.label, children: /* @__PURE__ */ e(a, { defaultVariant: "labelMd", emphasis: !0, mobileVariant: "labelSm", weight: "regular", children: r }) }) : /* @__PURE__ */ e("div", { className: i(l.label, l.default), children: /* @__PURE__ */ e(a, { defaultVariant: "labelMd", emphasis: !0, mobileVariant: "labelSm", weight: "regular", children: r }) }), f = ({ labels: r }) => /* @__PURE__ */ e("section", { className: l.root, children: r.length > 0 && /* @__PURE__ */ e("div", { className: l.footer, children: /* @__PURE__ */ e(n, { items: r, renderItem: o }) }) });
 export {
-  d as ScrollingText
+  f as ScrollingText
 };

package/dist/modules/ScrollingText/scrollingText.module.css

@@ -42,6 +42,10 @@
     }
 }
 
+.default {
+    cursor: default;
+}
+
 @media screen and (width <= 768px) {
     .root {
         padding: 40px 0;

package/package.json

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