@swype-org/react-sdk 0.1.166 → 0.1.168

package/dist/index.cjs

@@ -2322,18 +2322,22 @@ var badgeStyle = (color) => ({
 function PoweredByFooter() {
   const { tokens } = useSwypeConfig();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle3(tokens.textMuted), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3-9H9V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2z",
-        fill: "currentColor"
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Powered by Blink" })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3-9H9V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2z",
+          fill: "currentColor"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Powered by Blink" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: pillStyle(tokens.textMuted, tokens.border), children: "Beta Version" })
   ] });
 }
 var containerStyle3 = (color) => ({
   display: "flex",
+  flexDirection: "column",
   alignItems: "center",
   justifyContent: "center",
   gap: 6,
@@ -2341,6 +2345,19 @@ var containerStyle3 = (color) => ({
   color,
   padding: "12px 0 4px"
 });
+var rowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 6
+};
+var pillStyle = (color, border) => ({
+  fontSize: "0.65rem",
+  fontWeight: 600,
+  padding: "2px 8px",
+  borderRadius: 999,
+  border: `1px solid ${border}`,
+  color
+});
 function PrimaryButton({ children, onClick, disabled, loading, icon }) {
   const { tokens } = useSwypeConfig();
   const isDisabled = disabled || loading;
@@ -2927,7 +2944,7 @@ function StepList({ steps }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: listStyle, children: steps.map((step, i) => {
     const isComplete = step.status === "complete";
     const isActive = step.status === "active";
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle2, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -2950,7 +2967,7 @@ var listStyle = {
   flexDirection: "column",
   gap: 12
 };
-var rowStyle = {
+var rowStyle2 = {
   display: "flex",
   alignItems: "center",
   gap: 12