@swype-org/react-sdk 0.1.181 → 0.1.183

package/dist/index.js

@@ -2282,13 +2282,7 @@ function useFlowPhase() {
 function StepProgress({ phase }) {
   const { tokens } = useSwypeConfig();
   if (phase === "deposit") {
-    return /* @__PURE__ */ jsxs("div", { style: containerStyle3, children: [
-      /* @__PURE__ */ jsx("span", { style: dotStyle(tokens.textMuted) }),
-      /* @__PURE__ */ jsx("span", { style: labelStyle(tokens.textMuted), children: "Link" }),
-      /* @__PURE__ */ jsx("span", { style: lineStyle(tokens.textMuted) }),
-      /* @__PURE__ */ jsx("span", { style: dotStyle(tokens.accent) }),
-      /* @__PURE__ */ jsx("span", { style: labelStyle(tokens.text), children: "Deposit" })
-    ] });
+    return /* @__PURE__ */ jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle });
   }
   return /* @__PURE__ */ jsxs("div", { style: containerStyle3, children: [
     /* @__PURE__ */ jsx("span", { style: dotStyle(tokens.accent) }),
@@ -2313,7 +2307,7 @@ var dotStyle = (color) => ({
 var lineStyle = (color) => ({
   width: 32,
   height: 0,
-  borderTop: `2px dashed ${color}`,
+  borderTop: `2px solid ${color}`,
   opacity: 0.4,
   flexShrink: 0
 });
@@ -2323,6 +2317,10 @@ var labelStyle = (color) => ({
   color,
   whiteSpace: "nowrap"
 });
+var mascotStyle = {
+  width: 28,
+  height: 28
+};
 function ScreenHeader({ title, right, onBack, badge }) {
   const { tokens } = useSwypeConfig();
   const flowPhase = useFlowPhase();
@@ -3000,11 +2998,11 @@ function StepList({ steps }) {
       /* @__PURE__ */ jsx(
         "div",
         {
-          style: badgeStyle2(
-            isComplete ? tokens.accent : isActive ? tokens.accent : tokens.border,
-            isComplete || isActive
+          style: isActive ? activeBadgeContainerStyle : badgeStyle2(
+            isComplete ? tokens.accent : tokens.border,
+            isComplete
           ),
-          children: isComplete ? /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: "#fff" }) }) : /* @__PURE__ */ jsx("span", { style: badgeNumberStyle(isActive), children: i + 1 })
+          children: isComplete ? /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: "#fff" }) }) : isActive ? /* @__PURE__ */ jsx("span", { style: activeDotStyle(tokens.accent) }) : /* @__PURE__ */ jsx("span", { style: badgeNumberStyle, children: i + 1 })
         }
       ),
       /* @__PURE__ */ jsxs("div", { style: labelContainerStyle, children: [
@@ -3035,11 +3033,26 @@ var badgeStyle2 = (color, filled) => ({
   justifyContent: "center",
   flexShrink: 0
 });
-var badgeNumberStyle = (active) => ({
+var activeBadgeContainerStyle = {
+  width: 28,
+  height: 28,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0
+};
+var activeDotStyle = (color) => ({
+  width: 8,
+  height: 8,
+  borderRadius: "50%",
+  backgroundColor: color,
+  display: "block"
+});
+var badgeNumberStyle = {
   fontSize: "0.75rem",
   fontWeight: 600,
-  color: active ? "#fff" : "inherit"
-});
+  color: "inherit"
+};
 var labelContainerStyle = {
   display: "flex",
   flexDirection: "column"
@@ -3844,7 +3857,7 @@ var continueRowStyle = (tokens) => ({
   padding: "10px 16px",
   fontSize: "0.84rem",
   fontWeight: 600,
-  color: tokens.accent,
+  color: tokens.text,
   background: `${tokens.accent}0d`,
   borderTop: `1px solid ${tokens.accent}22`
 });
@@ -4101,7 +4114,7 @@ function SetupStatusScreen({
     return /* @__PURE__ */ jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsx(PoweredByFooter, {}), children: [
       /* @__PURE__ */ jsx(ScreenHeader, { onBack: onContinue }),
       /* @__PURE__ */ jsxs("div", { style: contentStyle5, children: [
-        /* @__PURE__ */ jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle }),
+        /* @__PURE__ */ jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle2 }),
         /* @__PURE__ */ jsx("h2", { style: headingStyle6(tokens.text), children: "Done!" }),
         /* @__PURE__ */ jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: "Return to the app to try one-tap deposits." })
       ] })
@@ -4131,7 +4144,7 @@ var contentStyle5 = {
   textAlign: "center",
   padding: "0 24px 32px"
 };
-var mascotStyle = {
+var mascotStyle2 = {
   width: 56,
   height: 56
 };
@@ -4280,7 +4293,7 @@ function DepositScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
-        /* @__PURE__ */ jsx("div", { style: mascotWrapStyle, children: /* @__PURE__ */ jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle2 }) }),
+        /* @__PURE__ */ jsx("div", { style: mascotWrapStyle, children: /* @__PURE__ */ jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle3 }) }),
         /* @__PURE__ */ jsxs("div", { style: depositCardStyle(tokens), children: [
           /* @__PURE__ */ jsx("div", { style: depositLabelStyle(tokens.textMuted), children: "Depositing" }),
           /* @__PURE__ */ jsxs("div", { style: amountRowStyle2, children: [
@@ -4337,7 +4350,7 @@ var mascotWrapStyle = {
   justifyContent: "center",
   marginBottom: 16
 };
-var mascotStyle2 = {
+var mascotStyle3 = {
   width: 36,
   height: 36
 };