@swype-org/react-sdk 0.1.182 → 0.1.183

package/dist/index.cjs

@@ -2285,13 +2285,7 @@ function useFlowPhase() {
 function StepProgress({ phase }) {
   const { tokens } = useSwypeConfig();
   if (phase === "deposit") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle3, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.textMuted) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(tokens.textMuted), children: "Link" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: lineStyle(tokens.textMuted) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.accent) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(tokens.text), children: "Deposit" })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle3, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.accent) }),
@@ -2326,6 +2320,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();
@@ -3003,11 +3001,11 @@ function StepList({ steps }) {
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: "#fff" }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: badgeNumberStyle(isActive), children: i + 1 })
+          children: isComplete ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { style: activeDotStyle(tokens.accent) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: badgeNumberStyle, children: i + 1 })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: labelContainerStyle, children: [
@@ -3038,11 +3036,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"
@@ -4104,7 +4117,7 @@ function SetupStatusScreen({
     return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {}), children: [
       /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack: onContinue }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle }),
+        /* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle2 }),
         /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Done!" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: "Return to the app to try one-tap deposits." })
       ] })
@@ -4134,7 +4147,7 @@ var contentStyle5 = {
   textAlign: "center",
   padding: "0 24px 32px"
 };
-var mascotStyle = {
+var mascotStyle2 = {
   width: 56,
   height: 56
 };
@@ -4283,7 +4296,7 @@ function DepositScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: mascotWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle2 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: mascotWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle3 }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: depositCardStyle(tokens), children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: depositLabelStyle(tokens.textMuted), children: "Depositing" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountRowStyle2, children: [
@@ -4340,7 +4353,7 @@ var mascotWrapStyle = {
   justifyContent: "center",
   marginBottom: 16
 };
-var mascotStyle2 = {
+var mascotStyle3 = {
   width: 36,
   height: 36
 };