@oatfi/ui 0.5.0 → 0.6.0

package/dist/index.cjs.js

@@ -2102,6 +2102,17 @@ const MethodCard = styled.div`
   transition:
     border-color 0.15s ease,
     background 0.15s ease;
+
+  /**
+   * The unsaved-edit bar. It thickens the left border rather than adding one, so
+   * the padding gives back the 2px it takes and the card's contents do not shift
+   * when it appears mid-keystroke. Declared last so it wins over the shorthand
+   * above, including on a $default card that already has an accent border.
+   */
+  ${({ theme, $edited }) => $edited && styled.css`
+      border-left: 3px solid ${theme.colors.accent};
+      padding-left: 14px;
+    `}
 `;
 const MethodBody = styled.div`
   flex: 1;
@@ -2166,6 +2177,10 @@ const FooterActions = styled.div`
   button {
     margin-top: 0;
   }
+
+  > :only-child {
+    margin-left: auto;
+  }
 `;
 const FooterRight = styled.div`
   display: flex;
@@ -2216,6 +2231,7 @@ function ManualMethodCard({
   index,
   value,
   isDefault = false,
+  status,
   trashDisabled = false,
   disabled = false,
   accountError,
@@ -2227,7 +2243,7 @@ function ManualMethodCard({
   name = "default-method"
 }) {
   const radioId = `default-${value.id}`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(MethodCard, { $default: isDefault, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(MethodCard, { $default: isDefault, $edited: status === "edited", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       RadioInput,
       {
@@ -2246,7 +2262,8 @@ function ManualMethodCard({
             "Account ",
             index + 1
           ] }),
-          isDefault && /* @__PURE__ */ jsxRuntime.jsx(Badge, { $variant: "filled", children: "Default" })
+          isDefault && /* @__PURE__ */ jsxRuntime.jsx(Badge, { $variant: "filled", children: "Default" }),
+          status === "edited" && /* @__PURE__ */ jsxRuntime.jsx(Badge, { $variant: "info", children: "Unsaved" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           IconButton,